HarmonyOS 应用级状态管理（LocalStorage、AppStorage、PersistentStorage ...

HarmonyOS 应用级状态管理

1. LocalStorage：页面级UI状态存储

1.1 概念

• LocalStorage是页面级的UI状态存储，通过@Entry装饰器吸收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage也可以在UIAbility内，页面间共享状态。
  
  
  
  • 应用步伐可以创建多个LocalStorage实例，LocalStorage实例可以在页面内共享，也可以通过GetShared接口，获取在UIAbility里创建的GetShared，实现跨页面、UIAbility内共享。
    
  • 组件树的根节点，即被@Entry装饰的@Component，可以被分配一个LocalStorage实例，此组件的所有子组件实例将自动得到对该LocalStorage实例的访问权限；
    
  • 被@Component装饰的组件最多可以访问一个LocalStorage实例和AppStorage，未被@Entry装饰的组件不可被独立分配LocalStorage实例，只能接受父组件通过@Entry传递来的LocalStorage实例。一个LocalStorage实例在组件树上可以被分配给多个组件。
    
  • LocalStorage中的所有属性都是可变的
    
  
  

1.2 应用逻辑使用LocalStorage

1. /**
2. * 和 js 用法几乎一致
3. * 初始化的时候需要传入一个对象使用
4. * 修改的时候通过key 修改 value的值
5. */
6. const storage = new LocalStorage({name: "李四"})
8. storage.set('name', '张三')
10. console.log(storage.get("name"))
14. @Entry
15. @Component
16. struct LearnStorage {
17.   @State message: string = 'Hello World'
19.   build() {
20.     Row() {
21.       Column() {
22.         Text(this.message)
23.           .fontSize(50)
24.           .fontWeight(FontWeight.Bold)
25.       }
26.       .width('100%')
27.     }
28.     .height('100%')
29.   }
30. }

复制代码

1.3 从UI内部使用LocalStorage（双向同步）

• 除了应用步伐逻辑使用LocalStorage，还可以借助LocalStorage相干的两个装饰器@LocalStorageProp和@LocalStorageLink，在UI组件内部获取到LocalStorage实例中存储的状态变量。
  
  
  
  
  
  
  

1.3.1 例子

• 使用构造函数创建LocalStorage实例storage；
  
• 使用@Entry装饰器将storage添加到LearnStorage顶层组件中；
  
• @LocalStorageLink绑定LocalStorage对给定的属性，建立双向数据同步
  

1. @Component
2. struct Child {
3.   // 子组件可以直接使用
4.   @LocalStorageLink('name') storageName: string = '张三';
5.   build() {
6.     Column() {
7.       Text('子组件---'+this.storageName)
8.     }
9.   }
10. }
15. /**
16. * 和 js 用法几乎一致
17. * 初始化的时候需要传入一个对象使用
18. * 修改的时候通过key 修改 value的值
19. */
20. const storage = new LocalStorage({})
24. @Entry(storage)
25. @Component
26. struct LearnStorage {
28.   /**
29.    * @LocalStorageLink变量装饰器与LocalStorage中的'name'属性建立双向绑定
30.    * 当@LocalStorageLink(key)装饰的数值改变被观察到时，修改将被同步回LocalStorage对应属性键值key的属性中。
31.    LocalStorage中属性键值key对应的数据一旦改变，属性键值key绑定的所有的数据（包括双向@LocalStorageLink和单向@LocalStorageProp）都将同步修改；
32.    当@LocalStorageLink(key)装饰的数据本身是状态变量，它的改变不仅仅会同步回LocalStorage中，还会引起所属的自定义组件的重新渲染
34.       必须指定默认值，如果localstorage对应的key里面有值优先取localstorage里面的值，没有则使用默认值
35.    */
36.   @LocalStorageLink('name') storageName: string = '张三';
38.   build() {
39.     Row() {
40.       Column() {
41.         Text(this.storageName)
42.           .fontSize(50)
43.           .fontWeight(FontWeight.Bold)
44.         Button('看看Storage').onClick(() => {
45.           this.storageName = '王五'
46.           // 也会打印王五
47.           console.log(storage.get('name'))
48.         })
49.         Child()
50.       }
51.       .width('100%')
52.     }
53.     .height('100%')
54.   }
55. }

复制代码

1.4 从UI内部使用LocalStorage（单向同步）

1. @Component
2. struct Child {
3.   // 子组件可以直接使用
4.   @LocalStorageProp('name') storageName: string = '张三';
5.   build() {
6.     Column() {
7.       Text('子组件---'+this.storageName)
8.     }
9.   }
10. }
15. /**
16. * 和 js 用法几乎一致
17. * 初始化的时候需要传入一个对象使用
18. * 修改的时候通过key 修改 value的值
19. */
20. const storage = new LocalStorage({})
24. @Entry(storage)
25. @Component
26. struct LearnStorage {
28.   /**
30.    必须指定默认值，如果localstorage对应的key里面有值优先取localstorage里面的值，没有则使用默认值
31.    */
32.   @LocalStorageProp('name') storageName: string = '张三';
34.   build() {
35.     Row() {
36.       Column() {
37.         Text(this.storageName)
38.           .fontSize(50)
39.           .fontWeight(FontWeight.Bold)
40.         Button('看看Storage').onClick(() => {
41.           this.storageName = '王五'
42.           // 单项同步不会修改storage里的数据
43.           console.log(storage.get('name'))
44.         })
45.         Child()
46.       }
47.       .width('100%')
48.     }
49.     .height('100%')
50.   }
51. }

复制代码

1.5 将LocalStorage实例从UIAbility共享到一个或多个视图（全局共享）

• 上面的实例中，LocalStorage的实例仅仅在一个@Entry装饰的组件和其所属的子组件（一个页面）中共享，如果希望其在多个视图中共享，可以在所属UIAbility中创建LocalStorage实例，并调用windowStage.loadContent。
  

1.5.1 EntryAbility

1. import UIAbility from '@ohos.app.ability.UIAbility';
2. import hilog from '@ohos.hilog';
3. import window from '@ohos.window';
5. // 创建storage
6. const localStorage: LocalStorage = new LocalStorage({globalName: "全局的名字"});
8. export default class EntryAbility extends UIAbility {
10.   // 挂载到实例里
11.   storage: LocalStorage = localStorage
14.   onCreate(want, launchParam) {
15.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
16.   }
18.   onDestroy() {
19.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
20.   }
22.   async onWindowStageCreate(windowStage: window.WindowStage) {
23.     windowStage.loadContent('pages/LearnStorage', this.storage);
24.   }
26.   onWindowStageDestroy() {
27.     // Main window is destroyed, release UI related resources
28.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
29.   }
31.   onForeground() {
32.     // Ability has brought to foreground
33.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
34.   }
36.   onBackground() {
37.     // Ability has back to background
38.     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
39.   }
40. }

复制代码

1.5.2 页面中使用

1. // 通过GetShared接口获取stage共享的LocalStorage实例
2. const storage = LocalStorage.GetShared()
4. console.log(JSON.stringify(storage))
5. // 注入
6. @Entry(storage)
7. @Component
8. struct LearnStorage {
10.   /**
11.       注意：要在模拟器中运行
12.     使用prop单项绑定 或者 link双向绑定
13.    */
14.   @LocalStorageLink('globalName') globalName: string = '李四';
15.   // globalName = 'aa'
17.   build() {
18.     Row() {
19.       Column() {
20.         Text(this.globalName)
21.           .fontSize(50)
22.           .fontWeight(FontWeight.Bold)
23.         Button('看看Storage').onClick(() => {
24.           this.globalName = '王五'
25.           // 单项同步不会修改storage里的数据
26.           console.log(storage.get('name'))
27.         })
28.       }
29.       .width('100%')
30.     }
31.     .height('100%')
32.   }
33. }

复制代码

2.AppStorage：应用全局的UI状态存储

2.1 概念

• AppStorage是应用全局的UI状态存储，是和应用的历程绑定的，由UI框架在应用步伐启动时创建，为应用步伐UI状态属性提供中心存储。
  
• 和AppStorage不同的是，LocalStorage是页面级的，通常应用于页面内的数据共享。而AppStorage是应用级的全局状态共享，还相称于整个应用的“中枢”，长期化数据PersistentStorage和环境变量Environment都是通过和AppStorage中转，才可以和UI交互。
  
• AppStorage是在应用启动的时候会被创建的单例。它的目标是为了提供应用状态数据的中心存储，这些状态数据在应用级别都是可访问的。AppStorage将在应用运行过程保留其属性。属性通过唯一的键字符串值访问。
  
• AppStorage可以和UI组件同步，且可以在应用业务逻辑中被访问。
  
• AppStorage中的属性可以被双向同步，数据可以是存在于本地或远程设备上，并具有不同的功能，比如数据长期化（详见PersistentStorage）。这些数据是通过业务逻辑中实现，与UI解耦，如果希望这些数据在UI中使用，需要用到@StorageProp和@StorageLink
  

2.2 从应用逻辑使用AppStorage

• AppStorage是单例，它的所有API都是静态的
  

1. // 有则修改没有则创建
2. AppStorage.SetOrCreate('name', 'app的名字');
5. console.log(AppStorage.Get('name'))
8. @Entry()
9. @Component
10. struct LearnStorage {
12.   build() {
13.     Row() {
14.       Column() {
15.         Text('哈哈哈')
16.       }
17.       .width('100%')
18.     }
19.     .height('100%')
20.   }
21. }

复制代码

2.3 从UI内部使用AppStorage

• @StorageLink变量装饰器与AppStorage配合使用，正如@LocalStorageLink与LocalStorage配合使用一样。此装饰器使用AppStorage中的属性创建双向数据同步
  

1. // 有则修改没有则创建
2. AppStorage.SetOrCreate('name', 'app的名字');
5. console.log(AppStorage.Get('name'))
8. @Entry()
9. @Component
10. struct LearnStorage {
11.   /**
12.    * 对AppStorage 里面的数据进行双向绑定
13.    * 同样使用prop为单向数据流
14.    */
15.   @StorageLink('name') name: string = '李四'
17.   build() {
18.     Row() {
19.       Column() {
20.         Text(this.name)
21.         Button('查看数据')
22.           .onClick(() => {
23.             this.name = '王五'
24.             // 数据也会改变
25.             console.log(AppStorage.Get('name'))
26.           })
27.       }
28.       .width('100%')
29.     }
30.     .height('100%')
31.   }
32. }

复制代码

3.PersistentStorage：长期化存储UI状态

3.1 概念

• PersistentStorage将选定的AppStorage属性保留在设备磁盘上。应用步伐通过API，以决定哪些AppStorage属性应借助PersistentStorage长期化。UI和业务逻辑不直接访问PersistentStorage中的属性，所有属性访问都是对AppStorage的访问，AppStorage中的更改会自动同步到PersistentStorage。
  
• PersistentStorage和AppStorage中的属性建立双向同步。应用开发通常通过AppStorage访问PersistentStorage，另外还有一些接口可以用于管理长期化属性，但是业务逻辑始终是通过AppStorage获取和设置属性的。
  

3.2 留意

3.2.1 允许的类型和值

• 
  
  • 使用简单类型如 number, string, boolean, enum。
    
  
  
• 
  
  • 可以使用 JSON.stringify() 和 JSON.parse() 的对象，但不支持内置类型如 Date, Map, Set。
    
  
  

3.2.2 不允许的类型和值

• 
  
  • 避免嵌套对象，包括对象数组和对象属性是对象。
    
  
  
• 
  
  • 不支持 undefined 和 null。
    
  
  

3.2.3 最佳实践和限定

• 
  
  • 避免长期化大型和经常变化的数据。
    
  
  
• 
  
  • 长期化变量最好小于 2kb。
    
  
  
• 
  
  • 不要过度长期化数据，可能影响 UI 渲染性能。
    
  
  
• 
  
  • 对于大量数据存储需求，建议使用数据库 API。
    
  
  
• 
  
  • 仅在 UI 页面内使用 PersistentStorage，否则无法长期化数据
    
  
  

3.3 使用

1. // 存入的数据会一直存在
2. PersistentStorage.PersistProp('token', '后端获取的token');
3. // 可以使用AppStorage 进行获取
4. console.log(AppStorage.Get('token'))
6. // 这样定义的不会持久化，应用被杀死 数据会丢失
7. // AppStorage.SetOrCreate('token', '小token')
9. @Entry()
10. @Component
11. struct LearnStorage {
12.   /**
13.    * 双向绑定
14.    * 也可以是会用StorageLink进行获取
15.    */
16.   @StorageLink('token') token: string = ''
19.   build() {
20.     Row() {
21.       Column() {
22.         Text(this.token)
23.         Button('修改数据')
24.           .onClick(() => {
25.             this.token = '修改的token，并且持久化'
26.           })
27.       }
28.       .width('100%')
29.     }
30.     .height('100%')
31.   }
32. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。