文章大纲
- 引言
- 一、在代码逻辑使用LocalStorage
- 二、从UI内部使用LocalStorage
- 三、@LocalStorageProp和LocalStorage单向同步
- 四、@LocalStorageLink和LocalStorage双向同步
- 五、兄弟组件之间同步状态变量
- 七、将LocalStorage实例从UIAbility共享到一个或多个视图
引言
前面一篇文章主要介绍了OpenHarmony 入门------ArkUI 管理跨页面和应用级LocalStorage 页面级UI状态存储小结（一）的相关语法和基础理论知识，这篇就好好学习下其用法。
一、在代码逻辑使用LocalStorage
在代码逻辑使用LocalStorage意思是通过相关的API 来建立联系并实现同步。
javascript
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二、从UI内部使用LocalStorage
除了应用程序逻辑使用LocalStorage，还可以借助LocalStorage相关的两个装饰器@LocalStorageProp和@LocalStorageLink，在UI组件内部获取到LocalStorage实例中存储的状态变量 。
以@LocalStorageLink为例：
- 使用构造函数创建LocalStorage实例storage；
- 使用@Entry装饰器将storage添加到LocalParent顶层组件中；
- @LocalStorageLink绑定LocalStorage对给定的属性，建立双向数据同步
javascript
//1、LocalStorage
let obj :Record<string, number> = {'PropA': 66}
// 创建新实例并使用给定对象初始化,LocalStorage接收的是一个Object
let storageObj = new LocalStorage(obj);
@Component
struct LocalChild {
@LocalStorageLink('PropA') propALinked : number = 88;
build() {
Column() {
// 初始化时读取LocalStorage变量的值66，在按钮点击一次后依然为66不变
Text(`LocalStorage： ${storageObj.get('PropA')}`).width('100%').height(36)
//初始化为storage的值，再点击了自己的按钮一次后为
Text(`LocalStorageLink： ${this.propALinked}`).width('100%').height(36)
Button(`在LocalChild中读取自己的@LocalStorageLink： ${this.propALinked}`)
.onClick(() => {
// 更新@LocalStorageLink变量的值,Text上的值会改变
this.propALinked += 2;
}).width('100%').height('36')
}
}
}
// ？？？使LocalStorage可从@Component组件访问，好像我传不传过来都不影响结果呀？？？？
@Entry(storageObj)
@Component
struct LocalParent {
// @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
@LocalStorageLink('PropA') storLinkP: number = 68;
build() {
Column({ space: 15 }) {
Text(`LocalParent LocalStorage： ${storageObj.get('PropA')}`).width('100%').height(36)
Button(`LocalParent 中LocalStorageLink： ${this.storLinkP}`).width('100%') // initial value from LocalStorage will be 66, because 'PropA' initialized already
.onClick(() => this.storLinkP += 3)
// @Component子组件自动获得对LocalParent LocalStorage实例的访问权限。
LocalChild()
}
}
}
三、@LocalStorageProp和LocalStorage单向同步
在下面的示例中，CompA 组件和Child组件分别在本地创建了与storage的'PropA'对应属性的单向同步的数据，我们可以看到：
- CompA中对this.storProp1的修改，只会在CompA中生效，并没有同步回storage；
- Child组件中，Text绑定的storProp2 依旧显示47。
javascript
let para: Record<string, number> = { 'PropA': 66 };
let storage: LocalStorage = new LocalStorage(para);
// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct CompP {
// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
@LocalStorageProp('PropA') storageProp1: number = 2;
build() {
Column({ space: 15 }) {
Text(`@LocalStorageProp和LocalStorage单向同步 ${storage.get('PropA')}`).width('100%').height(40).fontStyle(FontStyle.Italic).fontSize(26)
// 点击后从66开始加2，只改变当前组件显示的storageProp1，不会同步到LocalStorage中，即Child中的storageProp1不会改变
Button(`CompP 中 LocalStorage ${this.storageProp1}`)
.onClick(() => {
this.storageProp1 += 2
})
ChildComp()
}
}
}
@Component
struct ChildComp {
// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
@LocalStorageProp('PropA') storageProp2: number = 2;
build() {
Column({ space: 15 }) {
// 初始化时显示的依然是66而不是2，当CompP改变时，当前storageProp2也不会改变，显示66
Text(`ChildComp 中的LocalStorageProp： ${this.storageProp2} && ${storage.get('PropA')}`);
}
}
}
四、@LocalStorageLink和LocalStorage双向同步
@LocalStorageLink装饰的数据和LocalStorage双向同步的场景，还是上面的代码把@LocalStorageLink替换掉@LocalStorageProp就行了。
javascript
Text(`@LocalStorageProp和LocalStorage单向同步 ${storage.get('PropA')} && ${this.storageProp1}`).width('100%').height(40).fontStyle(FontStyle.Italic).fontSize(24)
五、兄弟组件之间同步状态变量
通过@LocalStorageLink双向同步兄弟组件之间的状态。先看Parent自定义组件中发生的变化：
- 点击"playCount ${this.playCount} dec by 1"，this.playCount减1，修改同步回LocalStorage中，Child组件中的playCountLink绑定的组件会同步刷新；
- 点击"countStorage ${this.playCount} incr by 1"，调用LocalStorage的set接口，更新LocalStorage中"countStorage"对应的属性，Child组件中的playCountLink绑定的组件会同步刷新；
- Text组件"playCount in LocalStorage for debug ${storage.get('countStorage')}"没有同步刷新，因为storage.get('countStorage')返回的是常规变量，常规变量的更新并不会引起Text组件的重新渲染。
Child自定义组件中的变化，playCountLink的刷新会同步回LocalStorage，并且引起兄弟组件和父组件相应的刷新。
javascript
let ls: Record<string, number> = { 'countStorage': 88 }
let storageBro: LocalStorage = new LocalStorage(ls);
@Component
struct Bro {
// 子组件实例的名字
label: string ='';
// 和LocalStorage中"countStorage"的双向绑定数据
@LocalStorageLink('countStorage') playCountLink: number = 0;
build() {
Row() {
Text(this.label).width(50).height(40).fontSize(12)
Text(`Bro playCountLink(+2): ${this.playCountLink} && ${storageBro.get<number>('countStorage')}`)
.onClick(() => {this.playCountLink += 2 }).width(200).height(40).fontSize(12)
}.width(300).height(40)
}
}
//若不传进来的话playCount的值不是用storageBro的来初始化， ${this.playCount}的值就会是99，而不是storage的88
@Entry(storageBro)
@Component
struct ParentBro {
@LocalStorageLink('countStorage') playCount: number = 99;
build() {
Column() {
Text(`ParentBro playCount(-1): ${this.playCount} && ${storageBro.get<number>('countStorage')} `)
.onClick(() => {this.playCount -= 1;}).width('100%').height(40).fontSize(12)
Text(`ParentBro playCount（+3）： ${this.playCount} `)
.onClick(() => {
storageBro.set<number | undefined>('countStorage', Number(storageBro.get<number>('countStorage')) + 3);
}).width('100%').height(40).fontSize(12)
Bro({ label: 'ChildA' })
Bro({ label: 'ChildB' })
Text(`ParentBro ${storageBro.get<number>('countStorage')}`).width('100%').height(40).fontSize(12)
}
}
}
点击另外的按钮效果也是和点击这个ChildA一样，改动的都是联动的
七、将LocalStorage实例从UIAbility共享到一个或多个视图
LocalStorage的实例仅仅在一个@Entry装饰的组件和其所属的子组件（一个页面）中共享，如果希望其在多个视图中共享，可以在所属UIAbility中创建LocalStorage实例，并调用windowStage.loadContent传入，然后再需要使用时候通过LocalStorage.getShared() 实例来复用可共享了。下面以一个UIAbility中的多个组件共享一个LocalChildStorage来说明：
- 在所属UIAbility中创建LocalStorage实例，并作为windowStage.loadContent的参数传入
javascript
export default class EntryAbility extends UIAbility {
param:Record<string,number> = {'PropAbility':68};
storageAbility:LocalStorage = new LocalStorage(this.param);
onWindowStageCreate(windowStage: window.WindowStage): void {
// Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
//把storageAbility传递过去
windowStage.loadContent('pages/StatePageMgr', this.storageAbility);
}
...
}在UI页面通过getShared接口获取通过loadContent共享的LocalStorage实例。LocalStorage.getShared()只在模拟器或者实机上才有效，在Previewer预览器中使用不生效。
- 在所需要使用这个LocalStorage的组件的Page下通过LocalStorage.getShared()函数来获取实例（而不是自己new去创建哈），然后剩下的就是和传统的自己定义一个LocalStorage实例的使用方法一样了。如LocalPage.ets实现如下
javascript
// 在通过getShared接口获取stage共享的LocalStorage实例
let storageFromAbility: LocalStorage = LocalStorage.getShared();
@Entry(storageFromAbility)
@Component
struct FromAbilityComp {
@LocalStorageLink('PropAbility') propLink: number = 88;
build() {
Column() {
Text(`LocalStorageFromAbility: ${this.propLink} && ${storageFromAbility.get<number>('PropAbility')}`).width('100%').height(36)
Button('To Page B').width('100%').onClick(() => {
router.pushUrl({
url: 'pages/Index'
})
})
}.height('100%')
}
}Index.ets
javascript
let storageFromAbility2 = LocalStorage.getShared()
@Entry(storageFromAbility2)
@Component
struct IndexComp {
@LocalStorageLink('PropAbility') propA: number = 66;
build() {
Row() {
Column({space: 10}) {
Text(`IndexComp this.propA: ${this.propA} && ${storageFromAbility2.get<number>('PropAbility')}`).width('100%').height(36)
.fontSize(22)
.fontWeight(FontWeight.Bold)
Button("IndexComp: Change LocalStorageLink this.propA=100")
.onClick(() => {
this.propA = 100;
}).height(36)
Button("Back Prev page")
.onClick(() => {
router.back()
})
}
.width('100%')
}
}
}
对于开发者更建议使用这个方式来构建LocalStorage的实例，并且在创建LocalStorage实例的时候就写入默认值，因为默认值可以作为运行异常的备份，也可以用作页面的单元测试。