鸿蒙开发（24）LocalStorage：页面级UI状态存储和AppStorage：应用全局的UI状态存储

LocalStorage：页面级UI状态存储

LocalStorage是页面级的UI状态存储，通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage支持UIAbility实例内多个页面间状态共享。
LocalStorage你可以理解为LocalStorage就是内存数据库。你可以往里面存放数据。
LocalStorage和AppStorage都是内存级别的存储方案。唯一不同的在于作用范围。
LocalStorage解决问题：
1. 在同一个EneryAlibity中多个页面可以实现数据的共享。不同EneryAlibity无法实现数据共享。
2. 实现一个页面中定义了存储的数据，在其他的子组件中都可以共享这个内存的数据。
代码实现：

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

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

(2）绑定

@Entry(storage)
@Component
struct Parent {}

需要将storage示例绑定给对应的entry修饰的组件。这样才能表达当前这个页面具有指定某一个storage内存状态。
以后这个页面的所有组件都可以共享这一个storage对象。

（3）获取数据

LocalStorage根据与@Component装饰的组件的同步类型不同，提供了两个装饰器：

@LocalStorageProp：@LocalStorageProp装饰的变量与LocalStorage中给定属性建立单向同步关系。

// 创建新实例并使用给定对象初始化
let para: Record<string, number> = { 'PropA': 47 };
let storage: LocalStorage = new LocalStorage(para);
// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct Parent {// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定@LocalStorageProp('PropA') storageProp1: number = 1;build() {Column({ space: 15 }) {// 点击后从47开始加1，只改变当前组件显示的storageProp1，不会同步到LocalStorage中Button(`Parent from LocalStorage ${this.storageProp1}`).onClick(() => {this.storageProp1 += 1})Child()}}
}@Component
struct Child {// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定@LocalStorageProp('PropA') storageProp2: number = 2;build() {Column({ space: 15 }) {// 当Parent改变时，当前storageProp2不会改变，显示47Text(`Parent from LocalStorage ${this.storageProp2}`)}}
}

@LocalStorageLink：@LocalStorageLink装饰的变量与LocalStorage中给定属性建立双向同步关系。

// 构造LocalStorage实例
let para: Record<string, number> = { 'PropA': 47 };
let storage: LocalStorage = new LocalStorage(para);
// 调用link（api9以上）接口构造'PropA'的双向同步数据，linkToPropA 是全局变量
let linkToPropA: SubscribedAbstractProperty<object> = storage.link('PropA');@Entry(storage)
@Component
struct Parent {// @LocalStorageLink('PropA')在Parent自定义组件中创建'PropA'的双向同步数据，初始值为47，因为在构造LocalStorage已经给“PropA”设置47@LocalStorageLink('PropA') storageLink: number = 1;build() {Column() {Text(`incr @LocalStorageLink variable`)// 点击“incr @LocalStorageLink variable”，this.storageLink加1，改变同步回storage，全局变量linkToPropA也会同步改变.onClick(() => {this.storageLink += 1})// 并不建议在组件内使用全局变量linkToPropA.get()，因为可能会有生命周期不同引起的错误。Text(`@LocalStorageLink: ${this.storageLink} - linkToPropA: ${linkToPropA.get()}`)}}
}

（4）子组件获取数据

@Component
struct Child {// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定@LocalStorageProp('PropA') storageProp2: number = 2;build() {Column({ space: 15 }) {// 当Parent改变时，当前storageProp2不会改变，显示47Text(`Parent from LocalStorage ${this.storageProp2}`)}}
}

（5）页面共享数据

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

// EntryAbility.ets
import { UIAbility } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';export default class EntryAbility extends UIAbility {para:Record<string, number> = { 'PropA': 47 };storage: LocalStorage = new LocalStorage(this.para);onWindowStageCreate(windowStage: window.WindowStage) {windowStage.loadContent('pages/Index', this.storage);}
}

在页面中使用，首先getShared拿到你们想要的storage对象，绑定到页面中

在下面的用例中，Index页面中的propA通过getShared()方法获取到共享的LocalStorage实例。点击Button跳转到Page页面，点击Change propA改变propA的值，back回Index页面后，页面中propA的值也同步修改。

// index.ets// 通过getShared接口获取stage共享的LocalStorage实例
@Entry({ storage: LocalStorage.getShared() })
@Component
struct Index {// 可以使用@LocalStorageLink/Prop与LocalStorage实例中的变量建立联系@LocalStorageLink('PropA') propA: number = 1;pageStack: NavPathStack = new NavPathStack();build() {Navigation(this.pageStack) {Row(){Column() {Text(`${this.propA}`).fontSize(50).fontWeight(FontWeight.Bold)Button("To Page").onClick(() => {this.pageStack.pushPathByName('Page', null);})}.width('100%')}.height('100%')}}
}

说明：
在UI页面通过getShared接口获取通过loadContent共享的LocalStorage实例。
LocalStorage.getShared()只在模拟器或者实机上才有效，在Previewer预览器中使用不生效。

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

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

@Entry
@Component
struct Page05_AddTask {//检测整个应用有没有PropA,如果没有创建一个@StorageLink('PropA') storageLink:number = 0
}

当进入项目中第一个页面发现全局存储的对象PropA,判断全局存储里面是否有这个变量。如果有这个变量，获取这个变量的值，拿到页面中用，
如果没有这个变量，讲这样页面初始化的值作为全局存储的结果
storageLink：初始化、更新、获取三个功能

页面二中：

@Entry
@Component
struct Page05_AddTask {//检测整个应用有没有PropA,如果没有创建一个//双向@StorageLink('PropA') storageLink:number = 10//单向取@StorageProp('PropA') storageProp:number = 99build() {//标题模块Text("新建任务"+`${this.storageLink}`).fontSize(26).fontWeight(FontWeight.Bold).margin({bottom:20})}
}

图1 @StorageProp初始化规则图示
在这里插入图片描述
图2 @StorageLink初始化规则图示

限制条件

@StorageProp/@StorageLink的参数必须为string类型，否则编译期会报错。

AppStorage.setOrCreate('PropA', 47);// 错误写法，编译报错
@StorageProp() storageProp: number = 1;
@StorageLink() storageLink: number = 2;// 正确写法
@StorageProp('PropA') storageProp: number = 1;
@StorageLink('PropA') storageLink: number = 2;