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、点击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中,因为一开始LocalStorage中没有name键, value1在使用默认值123初始化的时候,也把值存到了存到LocalStorage中name对应的属性值上面,所以当value2是优先用LocalStorage中name对应的值来初始化的,所以还是123。用@LocalStorageLink('name')同样如此。
Ability内多个页面共享的示例如下:
1、在当前Ability中的windowStage.loadConent传入LocalStorage
2、在组件入口处通过getShare获取,并通过@Entry传入