走的太急疼的是脚,逼的太紧累的是心,很多时候,慢一点也没关系,多给自己一些耐心和等待,保持热爱,当下即是未来,生活自有安排!
目录
一,定义
二,@LocalStorageProp定义
三,@LocalStorageProp装饰器使用规则说明
四,@LocalStorageProp变量的传递/访问规则说明
五,@LocalStorageLink定义
六, @LocalStorageLink装饰器使用规则说明
七,@LocalStorageLink变量的传递/访问规则说明
八,双向同步使用
九,单向同步使用
十,将LocalStorage实例从UIAbility共享到一个或多个视图
一,定义
LocalStorage是页面级的UI状态存储,通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage支持UIAbility实例内多个页面间状态共享。
LocalStorage是ArkTS为构建页面级别状态变量提供存储的内存内“数据库”。
!注意:
1,应用程序可以创建多个LocalStorage实例,LocalStorage实例可以在页面内共享,也可以通过GetShared接口,实现跨页面、UIAbility实例内共享。
2,组件树的根节点,即被@Entry装饰的@Component,可以被分配一个LocalStorage实例,此组件的所有子组件实例将自动获得对该LocalStorage实例的访问权限。
3,被@Component装饰的组件最多可以访问一个LocalStorage实例和AppStorage,未被@Entry装饰的组件不可被独立分配LocalStorage实例,只能接受父组件通过@Entry传递来的LocalStorage实例。一个LocalStorage实例在组件树上可以被分配给多个组件。
4,LocalStorage中的所有属性都是可变的。
应用程序决定LocalStorage对象的生命周期。当应用释放最后一个指向LocalStorage的引用时,比如销毁最后一个自定义组件,LocalStorage将被JS Engine垃圾回收。
LocalStorage根据与@Component装饰的组件的同步类型不同,提供了两个装饰器:
-
@LocalStorageProp:@LocalStorageProp装饰的变量和与LocalStorage中给定属性建立单向同步关系。
-
@LocalStorageLink:@LocalStorageLink装饰的变量和在@Component中创建与LocalStorage中给定属性建立双向同步关系。
限制条件:
1,LocalStorage创建后,命名属性的类型不可更改。后续调用Set时必须使用相同类型的值。
2,LocalStorage是页面级存储,GetShared接口仅能获取当前Stage通过windowStage.loadContent传入的LocalStorage实例,否则返回undefined。
二,@LocalStorageProp定义
如果要建立LocalStorage和自定义组件的联系,需要使用@LocalStorageProp和@LocalStorageLink装饰器。使用@LocalStorageProp(key)/@LocalStorageLink(key)装饰组件内的变量,key标识了LocalStorage的属性。
当自定义组件初始化的时候,@LocalStorageProp(key)/@LocalStorageLink(key)装饰的变量会通过给定的key,绑定LocalStorage对应的属性,完成初始化。本地初始化是必要的,因为无法保证LocalStorage一定存在给定的key(这取决于应用逻辑是否在组件初始化之前在LocalStorage实例中存入对应的属性)。
@LocalStorageProp(key)是和LocalStorage中key对应的属性建立单向数据同步,我们允许本地改变的发生,但是对于@LocalStorageProp,本地的修改永远不会同步回LocalStorage中,相反,如果LocalStorage给定key的属性发生改变,改变会被同步给@LocalStorageProp,并覆盖掉本地的修改。
三,@LocalStorageProp装饰器使用规则说明
@LocalStorageProp变量装饰器 | 说明 |
---|---|
装饰器参数 | key:常量字符串,必填(字符串需要有引号)。 |
允许装饰的变量类型 | Object、class、string、number、boolean、enum类型,以及这些类型的数组。 类型必须被指定,建议和LocalStorage中对应属性类型相同,否则会发生类型隐式转换,从而导致应用行为异常。不支持any,不允许使用undefined和null。 |
同步类型 | 单向同步:从LocalStorage的对应属性到组件的状态变量。组件本地的修改是允许的,但是LocalStorage中给定的属性一旦发生变化,将覆盖本地的修改。 |
被装饰变量的初始值 | 必须指定,如果LocalStorage实例中不存在属性,则作为初始化默认值,并存入LocalStorage中。 |
四,@LocalStorageProp变量的传递/访问规则说明
传递/访问 | 说明 |
---|---|
从父节点初始化和更新 | 禁止,@LocalStorageProp不支持从父节点初始化,只能从LocalStorage中key对应的属性初始化,如果没有对应key的话,将使用本地默认值初始化。 |
初始化子节点 | 支持,可用于初始化@State、@Link、@Prop、@Provide。 |
是否支持组件外访问 | 否。 |
注意:
当装饰的数据类型为boolean、string、number类型时,可以观察到数值的变化。
当装饰的数据类型为class或者Object时,可以观察到赋值和属性赋值的变化,即Object.keys(observedObject)返回的所有属性。
当装饰的对象是array时,可以观察到数组添加、删除、更新数组单元的变化。
当@LocalStorageProp(key)装饰的数值改变被观察到时,修改不会被同步回LocalStorage对应属性键值key的属性中。
当前@LocalStorageProp(key)单向绑定的数据会被修改,即仅限于当前组件的私有成员变量改变,其他的绑定该key的数据不会同步改变。
当@LocalStorageProp(key)装饰的数据本身是状态变量,它的改变虽然不会同步回LocalStorage中,但是会引起所属的自定义组件的重新渲染。
当LocalStorage中key对应的属性发生改变时,会同步给所有@LocalStorageProp(key)装饰的数据,@LocalStorageProp(key)本地的修改将被覆盖。
五,@LocalStorageLink定义
如果我们需要将自定义组件的状态变量的更新同步回LocalStorage,就需要用到@LocalStorageLink。
@LocalStorageLink(key)是和LocalStorage中key对应的属性建立双向数据同步:
-
本地修改发生,该修改会被写回LocalStorage中;
-
LocalStorage中的修改发生后,该修改会被同步到所有绑定LocalStorage对应key的属性上,包括单向(@LocalStorageProp和通过prop创建的单向绑定变量)、双向(@LocalStorageLink和通过link创建的双向绑定变量)变量。
六, @LocalStorageLink装饰器使用规则说明
@LocalStorageLink变量装饰器 | 说明 |
---|---|
装饰器参数 | key:常量字符串,必填(字符串需要有引号)。 |
允许装饰的变量类型 | Object、class、string、number、boolean、enum类型,以及这些类型的数组。 类型必须被指定,建议和LocalStorage中对应属性类型相同,否则会发生类型隐式转换,从而导致应用行为异常。不支持any,不允许使用undefined和null。 |
同步类型 | 双向同步:从LocalStorage的对应属性到自定义组件,从自定义组件到LocalStorage对应属性。 |
被装饰变量的初始值 | 必须指定,如果LocalStorage实例中不存在属性,则作为初始化默认值,并存入LocalStorage中。 |
七,@LocalStorageLink变量的传递/访问规则说明
传递/访问 | 说明 |
---|---|
从父节点初始化和更新 | 禁止,@LocalStorageLink不支持从父节点初始化,只能从LocalStorage中key对应的属性初始化,如果没有对应key的话,将使用本地默认值初始化。 |
初始化子节点 | 支持,可用于初始化@State、@Link、@Prop、@Provide。 |
是否支持组件外访问 | 否。 |
注意:
当装饰的数据类型为boolean、string、number类型时,可以观察到数值的变化。
当装饰的数据类型为class或者Object时,可以观察到赋值和属性赋值的变化,即Object.keys(observedObject)返回的所有属性。
当装饰的对象是array时,可以观察到数组添加、删除、更新数组单元的变化。
当@LocalStorageLink(key)装饰的数值改变被观察到时,修改将被同步回LocalStorage对应属性键值key的属性中。
LocalStorage中属性键值key对应的数据一旦改变,属性键值key绑定的所有的数据(包括双向@LocalStorageLink和单向@LocalStorageProp)都将同步修改。
当@LocalStorageLink(key)装饰的数据本身是状态变量,它的改变不仅仅会同步回LocalStorage中,还会引起所属的自定义组件的重新渲染。
八,双向同步使用
1,创建数据类
export default class YuanZhen {
public name: string = 'YuanZhen';
public age: number = 18;
constructor(name: string, age: number) {
this.name = name
this.age = age
}
}
2,在Entry入口创建LocalStorage
import YuanZhen from './bean/YuanZhen';
import ProvideTest from './ProvideTest';
let localState : Record<string,YuanZhen> = { "localState" : new YuanZhen("袁震",18) }
let storage:LocalStorage =new LocalStorage(localState)
@Entry(storage)
@Component
struct Index {
@LocalStorageLink("localState") yuanzhen:YuanZhen =new YuanZhen("袁震1",20)
build() {
Column(){
Text("父name:" + this.yuanzhen.name+"\nage:"+this.yuanzhen.age)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
this.yuanzhen.name ="袁震2"
this.yuanzhen.age =25
})
ProvideTest()
}
}
}
3,在子组件使用@LocalStorageLink
import YuanZhen from './bean/YuanZhen'
@Component
export default struct ProvideTest {
@LocalStorageLink("localState")yuanZhen:YuanZhen =new YuanZhen("袁震3",30)
build() {
Row() {
Column() {
Text("子name:"+this.yuanZhen.name+"\nage:"+this.yuanZhen.age)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
this.yuanZhen.name ="袁震子组件"
this.yuanZhen.age=35
})
}.width('100%')
}.height('100%')
}
}
运行:
点击父点击子
九,单向同步使用
1,在Entry入口创建LocalStorage
import YuanZhen from './bean/YuanZhen';
import ProvideTest from './ProvideTest';
let localState : Record<string,YuanZhen> = { "localState" : new YuanZhen("袁震",18) }
let storage:LocalStorage =new LocalStorage(localState)
function aa(){
storage.set("localState",new YuanZhen("袁震aa",22))
}
@Entry(storage)
@Component
struct Index {
@LocalStorageProp("localState") yuanzhen:YuanZhen =new YuanZhen("袁震1",20)
build() {
Column(){
Text("父name:" + this.yuanzhen.name+"\nage:"+this.yuanzhen.age)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
this.yuanzhen.name ="袁震2"
this.yuanzhen.age =25
})
ProvideTest()
}
}
}
2,子组件
import YuanZhen from './bean/YuanZhen'
@Component
export default struct ProvideTest {
@LocalStorageProp("localState")yuanZhen:YuanZhen =new YuanZhen("袁震3",30)
build() {
Row() {
Column() {
Text("子name:"+this.yuanZhen.name+"\nage:"+this.yuanZhen.age)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
this.yuanZhen.name ="袁震子组件"
this.yuanZhen.age=35
})
}.width('100%')
}.height('100%')
}
}
运行:
点击父点击子
因为是单向同步,所以它只改变自身的值,不会改变 LocalStorage 里面的值
如果将父组件修改为:
import YuanZhen from './bean/YuanZhen';
import ProvideTest from './ProvideTest';
let localState : Record<string,YuanZhen> = { "localState" : new YuanZhen("袁震",18) }
let storage:LocalStorage =new LocalStorage(localState)
function aa(){
storage.set("localState",new YuanZhen("袁震aa",22))
}
@Entry(storage)
@Component
struct Index {
@LocalStorageProp("localState") yuanzhen:YuanZhen =new YuanZhen("袁震1",20)
build() {
Column(){
Text("父name:" + this.yuanzhen.name+"\nage:"+this.yuanzhen.age)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
aa()
})
ProvideTest()
}
}
}
运行:
点击父点击子
因为点击父组件,改变的是localstorage里面的值,所以子组件也修改了。
十,将LocalStorage实例从UIAbility共享到一个或多个视图
在UIAbility中创建LocalStorage,并调用windowStage.loadContent传递LocalStorage文章来源:https://www.toymoban.com/news/detail-808072.html
export default class EntryAbility extends UIAbility {
onWindowStageCreate(windowStage: window.WindowStage): void {
//创建localStorage
let localState : Record<string,YuanZhen> = { "localState" : new YuanZhen("袁震",18) }
let storage:LocalStorage =new LocalStorage(localState)
windowStage.loadContent('pages/Index',storage, (err, data) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});
}
}
在Entry中获取LocalStorage文章来源地址https://www.toymoban.com/news/detail-808072.html
import YuanZhen from './bean/YuanZhen';
import ProvideTest from './ProvideTest';
let storage =LocalStorage.GetShared()
function aa(){
storage.set("localState",new YuanZhen("袁震aa",22))
}
@Entry(storage)
@Component
struct Index {
@LocalStorageProp("localState") yuanzhen:YuanZhen =new YuanZhen("袁震1",20)
build() {
Column(){
Text("父name:" + this.yuanzhen.name+"\nage:"+this.yuanzhen.age)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
aa()
})
ProvideTest()
}
}
}
到了这里,关于鸿蒙Harmony--LocalStorage--页面级UI状态存储详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!