存储

LocalStorage

1
2
3
1页面级别存储，内存数据库
2同一个EntryAbility（窗口，应用基本单元）下，多个页面间数据共享
31个@Entry分配1个LocalStorage，子组件可以共享

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 1// 实例化一个对象, 并设置存储数据
 2let param: Record<string, number> = { 'haha': 100 }
 3let storage: LocalStorage = new LocalStorage(param)
 4
 5// 通过实例方法赋值
 6storage.setOrCreate('username', 'Helen')
 7
 8// 注入storage
 9@Entry(storage)
10@Component
11struct Page02_LocalStorage {

LocalStoragePro

1
1从页面级存储中获取数据

LocalStorageLink

1
1从页面级存储中获取数据，并可以反向修改

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 1import { LocalStorage1 } from '../view/LocalStorage1'
 2import { LocalStorage2 } from '../view/LocalStorage2'
 3
 4// 实例化一个对象, 并设置存储数据
 5let param: Record<string, number> = { 'haha': 100 }
 6let storage: LocalStorage = new LocalStorage(param)
 7storage.setOrCreate('username', 'Helen')
 8
 9// 注入storage
10@Entry(storage)
11@Component
12struct Page02_LocalStorage {
13  @State message: string = 'Hello World';
14  // 从内存中获取页面级别存储, 获取不到则初始化
15  @LocalStorageProp('username') username: string = 'NewName'
16  @LocalStorageLink('username') myName: string = 'NewKing'
17
18  build() {
19    Column() {
20      Text(this.message)
21        .fontSize(30)
22        .fontColor(Color.Brown)
23
24      Text(this.username)
25        .fontSize(26)
26        .onClick(() => {
27          this.username = 'LocalStorageProp Name'
28        })
29
30      Text(this.myName)
31        .fontSize(26)
32        .onClick(() => {
33          this.myName = 'LocalStorageLink Name'
34        })
35
36      LocalStorage1()
37    }
38    .height('100%')
39    .width('100%')
40  }
41}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 1@Component
 2export struct LocalStorage1 {
 3  @LocalStorageProp('username') username: string = 'NewName'
 4  @LocalStorageLink('username') myName: string = 'NewKing'
 5
 6  build() {
 7    Column() {
 8      Text('LocalStorage1')
 9        .margin({
10          top: 30
11        })
12      Text(this.username)
13        .fontSize(26)
14        .onClick(() => {
15          this.username = 'LocalStorageProp Name'
16        })
17      Text(this.myName)
18        .fontSize(26)
19        .onClick(() => {
20          this.myName = 'LocalStorageLink Name'
21        })
22    }
23    .width('100%')
24    .height('100%')
25    .border({
26      width: 1,
27      color: Color.Brown
28    })
29  }
30}

页面间共享

1
2
3
4
5
1export default class EntryAbility extends UIAbility {
2  param: Record<string, string> = { 'theme': 'hahaha' }
3  storage: LocalStorage = new LocalStorage(this.param)
4
5windowStage.loadContent('pages/Index', this.storage, (err) => {

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 1import { UserModel } from '../viewmodel/UserModel'
 2import { ChildModel } from '../viewmodel/ChildModel'
 3import { router } from '@kit.ArkUI'
 4
 5let storage = LocalStorage.getShared()
 6
 7@Entry(storage)
 8@Component
 9struct Page02_TaskList {
10  @State user: UserModel = new UserModel(1, 'Helen')
11  @LocalStorageLink('theme') theme: string = 'default'
12
13  build() {
14    Column() {
15      ChildModel({
16        user: this.user
17      })
18      Text(`${JSON.stringify(this.user)}`)
19
20      Text(this.theme)
21
22      Button('跳转').onClick(() => {
23        router.pushUrl({
24          url: 'pages/Page03_LocalStorage'
25        })
26      })
27    }
28  }
29}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 1import { LocalStorage1 } from '../view/LocalStorage1'
 2import { LocalStorage2 } from '../view/LocalStorage2'
 3let storage = LocalStorage.getShared()
 4
 5@Entry(storage)
 6@Component
 7struct Page03_LocalStorage {
 8  @State message: string = 'Hello World';
 9  @LocalStorageLink('theme') theme: string = 'NewTheme'
10
11  build() {
12    Column() {
13      Text(this.message)
14        .fontSize(30)
15        .fontColor(Color.Brown)
16
17      Text(this.theme)
18        .fontSize(26)
19        .onClick(() => {
20          this.theme = 'Page03_LocalStorage theme'
21        })
22
23      LocalStorage1()
24    }
25    .height('100%')
26    .width('100%')
27  }
28}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 1@Component
 2export struct LocalStorage1 {
 3  @LocalStorageLink('theme') theme: string = 'NewTheme2'
 4
 5  build() {
 6    Column() {
 7      Text('LocalStorage1')
 8        .margin({
 9          top: 30
10        })
11      Text(this.theme)
12        .fontSize(26)
13        .onClick(() => {
14          this.theme = 'LocalStorage1 theme'
15        })
16    }
17    .width('100%')
18    .height('100%')
19    .border({
20      width: 1,
21      color: Color.Brown
22    })
23  }
24}

AppStorage

1
2
1应用存储管理，类似状态机，不需要借助AbilityUI
2相对页面级别存储，更加方便使用

1
2
1@StorageLink('test') test: string = 'test data'
2@StorageProp('prop') prop: string = 'prop data'

Copyright ©2010-2022 比特日记 All Rights Reserved.

Powered By 可尔物语

浙ICP备11005866号-12