鸿蒙NEXT开发-应用状态

 注意：博主有个鸿蒙专栏，内里从上到下有关于鸿蒙next的教学文档，大家感爱好可以学习下
如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识

目录
1. 应用状态根本介绍
2. LocalStorage：页面级UI状态存储
2.1 根本介绍
2.2 用法
2.3 两个页面共享一个对象
2.4 页面间共享
2.5 应用逻辑中使用
3. AppStorage：应用全局的UI状态存储
3.1 根本介绍
3.2 根本用法
3.3 经常使用的方法
3.4 代码示例
4. PersistentStorage：长期化存储UI状态
4.1 根本介绍
4.2 限制条件
4.3 使用场景
5. Environment：设备情况
5.1 概述
5.2 限制条件
5.3 使用场景

---

1. 应用状态根本介绍

• LocalStorage：页面级UI状态存储，通常用于UIAbility内、页面间的状态共享。（内存- 注意：和前端的区分开，它非长期化，非全应用）
  
• AppStorage：特别的单例LocalStorage对象，由UI框架在应用步伐启动时创建，为应用步伐UI状态属性提供中央存储。（内存-非长期化-退出应用同样消散）
  
• PersistentStorage：长期化存储UI状态，通常和AppStorage共同使用，选择AppStorage存储的数据写入磁盘，以确保这些属性在应用步伐重新启动时的值与应用步伐关闭时的值相同。（写入磁盘-长期化状态-退出应用 数据同样存在）
  
• Environment：应用步伐运行的设备的情况参数，情况参数会同步到AppStorage中，可以和AppStorage搭配使用。
  

官方文档地址：
文档中心


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


2.1 根本介绍

LocalStorage 是页面级的UI状态存储，通过 @Entry 装饰器吸收的参数可以在页面内共享同一个 LocalStorage 实例。 LocalStorage 也可以在 UIAbility 内，页面间共享状态。

2.2 用法

用法

• 创建 LocalStorage 实例：const storage = new LocalStorage({ key: value })
  
• 单向 @LocalStorageProp('user') 组件内可变
  
• 双向 @LocalStorageLink('user') 全局均可变
  

2.3 两个页面共享一个对象

• 创建一个共享的状态
  

1. export class PersonModel {
2.   username: string = '张三'
3.   age: number = 18
4. }
6. let pp = new PersonModel()
7. pp.username = "东林"
8. pp.age = 29
9. // 创建新实例并使用给定对象初始化
10. let para: Record<string, PersonModel> = { 'user': pp };
11. let local: LocalStorage = new LocalStorage(para);
13. export { local }

复制代码

• 页面1
  

1. import { local, PersonModel } from '../models/PersonModel'
2. import { router } from '@kit.ArkUI'
4. @Entry(local)
5.   @Component
6.   struct LocalStorageCaseA {
7.     @LocalStorageLink("user")
8.     user: PersonModel = new PersonModel
10.     build() {
11.       Column() {
12.         Text(this.user.username)
13.           .fontSize(40)
14.           .onClick(() => {
15.             this.user.username = "王八蛋"
16.             router.pushUrl({url:'pages/LocalStorageCaseB'})
17.           })
19.       }
20.       .height('100%')
21.         .width('100%')
22.     }
23.   }

复制代码

• 页面2
  

1. import { local, PersonModel } from '../models/PersonModel'
2. import { router } from '@kit.ArkUI'
4. @Entry(local)
5.   @Component
6.   struct LocalStorageCaseB {
7.     @LocalStorageLink("user")
8.     user: PersonModel = new PersonModel()
9.     build() {
10.       Column() {
11.         Text(this.user.username)
12.           .fontSize(50)
13.           .fontWeight(FontWeight.Bold)
14.           .onClick(() => {
15.             this.user.username = "李四"
16.             router.back()
17.           })
19.         Text(this.user.age.toString())
20.           .fontSize(50)
21.           .fontWeight(FontWeight.Bold)
22.       }
23.       .height('100%')
24.         .width('100%')
25.     }
26.   }

复制代码

2.4 页面间共享


如果你想在UIAbility中共享某个localStorage，可以在入口处直接初始化传入

• 可以在loadContent过程中直接传入创建的LocalStorage
  
• const storage = LocalStorage.GetShared() 得到实例
  
• 通过 @Entry(storage) 传入页面
  

• 在UIAbility举行初始化storage
  

1. class UserInfoClass {
2.   name?: string = ""
3.   age?: number = 0
4. }
5. let user: Record<string, UserInfoClass> = { "user": {
6.   name: '水若寒宇',
7.   age: 34
8. }};
9. const sharedStorage = new LocalStorage(user)
11. onWindowStageCreate(windowStage: window.WindowStage): void {
12.   // Main window is created, set main page for this ability
13.   hilog.info(0x0000, 'testUIAbility', '%{public}s', 'Ability onWindowStageCreate');
15.   windowStage.loadContent('pages/Index',local, (err) => {
16.     if (err.code) {
17.       hilog.error(0x0000, 'testUIAbility', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
18.       return;
19.     }
20.     hilog.info(0x0000, 'testUIAbility', 'Succeeded in loading the content.');
21.   });
22. }

复制代码

• 在页面中传入
  

1. const shareLocal = LocalStorage.GetShared()
2. @Entry(shareLocal)

复制代码

2.5 应用逻辑中使用

1. @Entry
2.   @Component
3.   struct Index {
4.     build() {
5.       Button('应用逻辑中使用')
6.         .onClick(()=>{
7.           let para: Record<string,number> = { 'PropA': 47 };
8.           let storage: LocalStorage = new LocalStorage(para); // 创建新实例并使用给定对象初始化
9.           let propA: number | undefined = storage.get('PropA') // propA == 47
10.           console.log(propA?.toString())
11.           let link1: SubscribedAbstractProperty<number> = storage.link('PropA'); // link1.get() == 47
12.           let link2: SubscribedAbstractProperty<number> = storage.link('PropA'); // link2.get() == 47
13.           let prop: SubscribedAbstractProperty<number> = storage.prop('PropA'); // prop.get() == 47
14.           link1.set(48); // two-way sync: link1.get() == link2.get() == prop.get() == 48
15.           prop.set(1); // one-way sync: prop.get() == 1; but link1.get() == link2.get() == 48
16.           link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49
18.         })
20.     }
21.   }

复制代码

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


LocalStorage是针对UIAbility的状态共享- 一个UIAbility有个页面
一个应用大概有若干个UIAbility

3.1 根本介绍

概述
AppStorage是在应用启动的时候会被创建的单例。它的目的是为了提供应用状态数据的中心存储，这些状态数据在应用级别都是可访问的。AppStorage将在应用运行过程保留其属性。属性通过唯一的键字符串值访问。
AppStorage可以和UI组件同步，且可以在应用业务逻辑中被访问。
AppStorage支持应用的主线程内多个UIAbility实例间的状态共享。
AppStorage中的属性可以被双向同步，数据可以是存在于当地或远程设备上，并具有不同的功能，比如数据长期化（详见PersistentStorage）。这些数据是通过业务逻辑中实现，与UI解耦，如果希望这些数据在UI中使用，需要用到@StorageProp和@StorageLink。

3.2 根本用法

AppStorage 是应用全局的UI状态存储，是和应用的进程绑定的，由UI框架在应用步伐启动时创建，为应用步伐UI状态属性提供中央存储。-注意它也是内存数据，不会写入磁盘
第一种用法-使用UI修饰符

• 如果是初始化使用 AppStorage.setOrCreate(key,value)
  
• 单向 @StorageProp('user') 组件内可变
  
• 双向 @StorageLink('user') 全局均可变
  

第二种用法 使用API方法

• AppStorage.get<ValueType>(key) 获取数据
  
• AppStorage.set<ValueType>(key,value) 覆盖数据
  
• const link: SubscribedAbstractProperty<ValueType> = AppStorage.Link(key) 覆盖数据
  

• 
  
  
  
  • link.set(value) 修改
    
  • link.get() 获取
    
  
  

3.3 经常使用的方法

1. // 存数据
2. AppStorage.setOrCreate("token", "123456")
3. AppStorage.setOrCreate<string>("username", "东林")
4. // 获取数据
5. const token: string | undefined = AppStorage.get("token")
6. const username = AppStorage.get<string>("username")
7. // 删除数据
8. AppStorage.delete("token")

复制代码

3.4 代码示例

1. import { promptAction, router } from '@kit.ArkUI'
3. @Entry
4.   @Component
5.   struct AppStorageCase {
6.     @State
7.     username: string = "admin"
8.     @State
9.     password: string = "123456"
11.     login() {
12.       if (this.username === 'admin' && this.password === "123456") {
13.         // 要将当前用户的身份存入AppStorage
14.         AppStorage.setOrCreate<UserInfoModel>("userInfo", new UserInfoModel('东林', 20))
15.         router.pushUrl({ url: 'pages/Detail' })
16.       } else {
17.         promptAction.showToast({ message: '登录失败' })
18.       }
19.     }
21.     build() {
22.       Row() {
23.         Column({ space: 20 }) {
24.           TextInput({ placeholder: '请输入用户名', text: $$this.username })
26.           TextInput({ placeholder: '请输入密码', text: $$this.password })
27.             .type(InputType.Password)
28.           Button("登录")
29.             .width('100%')
30.             .onClick(() => {
31.               this.login()
32.             })
33.         }
34.         .padding(20)
35.           .width('100%')
36.       }
37.       .height('100%')
38.     }
39.   }
42. export class UserInfoModel {
43.   username: string = ''
44.   age: number = 0
46.   constructor(username: string, age: number) {
47.     this.username = username
48.     this.age = age
49.   }
50. }

复制代码

1. import { UserInfoModel } from './Index'
3. @Entry
4.   @Component
5.   struct Detail {
6.     @State userInfo: UserInfoModel | null | undefined = null
8.     aboutToAppear(): void {
9.       const userInfo = AppStorage.get<UserInfoModel>("userInfo")
10.       this.userInfo = userInfo
11.     }
13.     build() {
14.       Column() {
15.         Text(this.userInfo?.username)
16.         Text(this.userInfo?.age.toString())
17.       }
18.       .height('100%')
19.         .width('100%')
20.     }
21.   }

复制代码

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


前两个末节介绍的LocalStorage和AppStorage都是运行时的内存，但是在应用退出再次启动后，依然能保存选定的结果，是应用开发中十分常见的现象，这就需要用到PersistentStorage。
PersistentStorage是应用步伐中的可选单例对象。此对象的作用是长期化存储选定的AppStorage属性，以确保这些属性在应用步伐重新启动时的值与应用步伐关闭时的值相同。

4.1 根本介绍

概述
PersistentStorage将选定的AppStorage属性保留在设备磁盘上。应用步伐通过API，以决定哪些AppStorage属性应借助PersistentStorage长期化。UI和业务逻辑不直接访问PersistentStorage中的属性，所有属性访问都是对AppStorage的访问，AppStorage中的更改会主动同步到PersistentStorage。

PersistentStorage和AppStorage中的属性创建双向同步。应用开发通常通过AppStorage访问PersistentStorage，另外还有一些接口可以用于管理长期化属性，但是业务逻辑始终是通过AppStorage获取和设置属性的。

4.2 限制条件

PersistentStorage允许的范例和值有：

• number, string, boolean, enum 等简朴范例。
  
• 可以被JSON.stringify()和JSON.parse()重构的对象。比方Date, Map, Set等内置范例则不支持，以及对象的属性方法不支持长期化。
  

PersistentStorage不允许的范例和值有：

• 不支持嵌套对象（对象数组，对象的属性是对象等）。由于目前框架无法检测AppStorage中嵌套对象（包罗数组）值的变化，所以无法写回到PersistentStorage中。
  
• 不支持undefined 和 null 。
  

4.3 使用场景

从AppStorage中访问PersistentStorage初始化的属性

1. @Entry
2.   @Component
3.   struct Index {
4.     build() {
5.       Column() {
6.         Button('点我')
7.           .onClick(() => {
8.             PersistentStorage.persistProp<string>('test', '123456');
9.             const test = AppStorage.get<string>('test'); // returns 47
10.             console.log(test)
11.           })
12.       }.width('100%')
13.         .height('100%')
14.     }
15.   }

复制代码

官方参考文档：
文档中心

5. Environment：设备情况


5.1 概述

开发者如果需要应用步伐运行的设备的情况参数，以此来作出不同的场景判断，比如多语言，深浅色模式等，需要用到Environment设备情况查询。
Environment是ArkUI框架在应用步伐启动时创建的单例对象。它为AppStorage提供了一系列描述应用步伐运行状态的属性。Environment的所有属性都是不可变的（即应用不可写入），所有的属性都是简朴范例。

5.2 限制条件

Environment的所有属性都是不可变的（即应用不可写入），所有的属性都是简朴范例。

5.3 使用场景

想要知道当前系统的所使用的语言，然后把信息共享给应用内所有页面使用

注意：记得使用模仿器或者真机读取语言

1. import i18n from '@ohos.i18n'
2. const lang=i18n.getSystemLanguage()
3. console.log('lang test:'+lang);
4. Environment.envProp('lang',lang)
5. @Entry
6.   @Component
7.   struct Index {
8.     @StorageProp('lang')
9.     lang:string=''
10.     build() {
11.       Column(){
12.         Text(lang)
13.       }.width('100%')
14.         .height('100%')
16.     }
17.   }

复制代码

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