系列文章目录

【鸿蒙开发】鸿蒙开发基础干货篇–1
【鸿蒙开发】基础干货篇–2 小白入门手册（内含Dev Eco安装教程和汉化插件安装）
【鸿蒙开发】基础干货篇–3 小白入门手册 （内含模拟器保姆级安装使用教程）
【鸿蒙开发】基础干货篇–4 小白入门手册（内含Stage模型工程目录结构和UIAbility 组件详解）
【鸿蒙开发】“一篇带你掌握HAP、HAR、HSP”

---

---

前言

开发者要实现应用级的，或者多个页面的状态数据共享，就需要用到应用级别的状态管理的概念。ArkTS根据不同特性，提供了不同的应用状态管理的能力。

---

一、LocalStorage：页面级UI状态存储

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

tips:
被@Component装饰的组件最多可以访问一个LocalStorage实例和AppStorage，未被@Entry装饰的组件不可被独立分配LocalStorage实例，只能接受父组件通过@Entry传递来的LocalStorage实例。一个LocalStorage实例在组件树上可以被分配给多个组件。

作用域如下图：

1.页面内使用方法

1. 创建新实例并使用给定对象初始化

// 创建新实例并使用给定对象初始化
let para: Record<string, number> = { 'PropA': 47 };
let storage: LocalStorage = new LocalStorage(para);
storage.setOrCreate('PropB', new PropB(50));

2. 设置给@Entry的参数：@Entry(storage)

// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct CompA {
 // @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
 @LocalStorageLink('PropA') parentLinkNumber: number = 1;
 // @LocalStorageLink变量装饰器与LocalStorage中的'PropB'属性建立双向绑定
 @LocalStorageLink('PropB') parentLinkObject: PropB = new PropB(0);

 build() {
    // @Component子组件自动获得对CompA LocalStorage实例的访问权限。
 	Child()
 ...
 }

@LocalStorageLink绑定LocalStorage对给定的属性，建立双向数据同步。

@Component
struct Child {
 // @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
 @LocalStorageLink('PropA') childLinkNumber: number = 1;
 // @LocalStorageLink变量装饰器与LocalStorage中的'PropB'属性建立双向绑定
 @LocalStorageLink('PropB') childLinkObject: PropB = new PropB(0);

 build() {
		...
 	}
 }

2.页面间共享

如果想在UIAbility中共享某个localStorage，可以使用如下方式实现：

• 可以在loadContent过程中直接传入创建的LocalStorage
• 页面中通过 const storage = LocalStorage.GetShared() 得到实例
• 通过 @Entry(storage) 传入页面，后续的使用和之前没有区别

3.应用逻辑中使用

let para: Record<string,number> = { 'PropA': 47 };
let storage: LocalStorage = new LocalStorage(para); // 创建新实例并使用给定对象初始化
let propA: number | undefined = storage.get('PropA') // propA == 47
let link1: SubscribedAbstractProperty<number> = storage.link('PropA'); // link1.get() == 47
let link2: SubscribedAbstractProperty<number> = storage.link('PropA'); // link2.get() == 47
let prop: SubscribedAbstractProperty<number> = storage.prop('PropA'); // prop.get() == 47
link1.set(48); // two-way sync: link1.get() == link2.get() == prop.get() == 48
prop.set(1); // one-way sync: prop.get() == 1; but link1.get() == link2.get() == 48
link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49

4.UIAbility内状态-LocalStorage

二、应用状态-AppStorage

AppStorage是应用全局的UI状态存储，是和应用的进程绑定的，由UI框架在应用程序启动时创建，为应用程序UI状态属性提供中央存储。

1.页面内使用

使用方法：

1. 初始化： AppStorage.SetOrCreate(key,value)

代码如下（示例）：

AppStorage.setOrCreate<User>('user', { name: 'xx', age: 18 })

2. 单向 @StorageProp(‘user’) 组件内可变; 双向 @StorageLink(‘user’) 全局均可变

2.应用逻辑中使用

以下写法 每次都需要通过 key 来指定对应的数据:

获取数据 AppStorage.get(key)
覆盖数据 AppStorage.set(key,value)
获取数据的 link 后续通过 link 进行取值和修改 const link: SubscribedAbstractProperty = AppStorage.link(key)
取值 link.get()
覆盖 link.set(value)

AppStorage.get<User>('user')
AppStorage.set<User>('user'，{username:'张三'})

---

总结

以上就是应用状态的两个方法详解。大家可以点点关注，我会每天更新哒~