HarmonyOS开发之LocalStorage

LocalStorage是页面级的UI状态存储,页面组件(组件树根节点)获取LocalStorage是通过@Entry装饰器接收的参数传入,子组件自动获取LocalStorage的访问权限,获取的也是通过@Entry传入的LocalStorage。页面内共享同一个LocalStorage实例。支持一个UIAbility内多个页面间共享一个LocalStorage。getShared仅能获取当前Stage通过UIAbility中windonStage.loadcontent传入的LocalStorage

不与自定义组件进行关联的使用场景:

LocalStorage若是想要跟自定义组件建立联系,需要使用装饰器:@LocalStorageProp和@LocalStorageLink

一、@LocalStorageProp:此装饰器装饰的变量与LocalStorage中key对应的属性建立单向同步关系

示例:@LocalStorageProp(key) name:string = ‘’;

装饰的变量需要初始化,因为此key(常量字符串)可能没值。另外不能通过父组件传值赋值,只能通过LocalStorage中的key初始化,若没有对应key,用默认值初始化,并将值存入LocalStorage中,注意:此时是存入,不是同步。

支持初始化子节点,可用于初始化子节点的@State 、@Prop、@Link、@Provide状态变量

只能在组件内访问,不支持在组件外部访问

同步类型:数据单向同步。

框架行为:

1、被@LocalStorageProp装饰的变量值改变时,不会同步会回LocalStorage中,但会驱动对应的UI组件刷新渲染.

2、若是LocalStorage(key)的值发生改变,那么所有@LocalStorageProp(key)装饰的变量都会发生改变,并且覆盖其本地的改变。

示例1:

示例1

示例1中:

1、点击name1,name1值改为‘value change’,驱动name1显示内容改变,不会同步给LocalStorage,所以name2显示内容不变。

2、点击name2,会改变LocalStorage中name对应的值,单向同步给name1。改为'keke'

二、@LocalStorageLink:此装饰器装饰的变量与LocalStorage中key对应的属性建立双向同步关系

示例:@LocalStorageLink(key)  age:number:= 11;

装饰的变量需要初始化,因为此key可能没值。同样不能通过父组件传值赋值,只能通过LocalStorage中的key初始化。若没有对应的key,用默认值初始化,并存入LocalStorage中。

支持初始化子节点,可用于初始化子节点的@State、@Prop、@Link、@Provide状态变量

同样只能在组件内访问,不支持在组件外部访问

@LocalStorageLink(key)和LocalStorage中key对应的值会建立数据双向同步。

本地变量age改变,会把值同步回LocalStorage中key对应的值,同样LocalStorage中key对应的值改变,也会把值同步到本地变量age。即:把age的新值同步回LocalStorage中key对应的值,同样LocalStorage中key对应的值发生改变,本地变量age的值也发生同步改变。

同步类型:双向同步。

框架行为:

当@LocalStorageLink(key)装饰的的变量发生改变时,会把修改的结果值同步回LocalStorage中key对应的属性值。

当LocalStorage中的key对应的属性值发生改变时,会把改变的结果值同步到所有key绑定的数据上面(包括LocalStorageLink(key)和LocalStorageProp装饰的变量。

当@LocalStorageLink(key)装饰的变量发生该改变时,在同步数据回LocalStorage中的同时,还会驱动与其绑定的UI组件进行刷新渲染

示例2:

示例2中:

1、点击name1,name1值改为‘value change’,驱动name1显示内容改变,同时会同步给LocalStorage,所以name2显示内容对应的不是状态变量,所以显示内容不会改变,但LocalStorage的值改变会同步给所有绑定了对应key的数据,所以name3也会改变,并驱动name3的UI刷新渲染。

2、点击name2,会改变LocalStorage中name对应的值,会同步给name1和name3。均改为'keke',同时驱动name1和name3组件UI重新渲染

示例代码3:若LocaStorage中没有对应的key,用默认值初始化,并将值存入LocalStorage中,下次通过key取的值是LocalStorage中的值,而不是新的默认值

下面示例3是针对初始值而言:

示例 3

示例3中,因为一开始LocalStorage中没有name键, value1在使用默认值123初始化的时候,也把值存到了存到LocalStorage中name对应的属性值上面,所以当value2是优先用LocalStorage中name对应的值来初始化的,所以还是123。用@LocalStorageLink('name')同样如此。


Ability内多个页面共享的示例如下:

1、在当前Ability中的windowStage.loadConent传入LocalStorage

来源

2、在组件入口处通过getShare获取,并通过@Entry传入

取值
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容