鸿蒙Harmony--LocalStorage--页面级UI状态存储详解

走的太急疼的是脚，逼的太紧累的是心，很多时候，慢一点也没关系，多给自己一些耐心和等待，保持热爱，当下即是未来，生活自有安排! 

目录

一，定义

二，@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对应的属性建立双向数据同步：

  1. 本地修改发生，该修改会被写回LocalStorage中；

  2. 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 = namethis.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

export default class EntryAbility extends UIAbility {onWindowStageCreate(windowStage: window.WindowStage): void {//创建localStoragelet 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

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()}}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/344523.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Java SE语法篇】5.方法

【Java SE语法篇】5.方法

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ 文章目录 0. 前言1. 方法的概念和使用1.1 什么是方法1.2 方法…
阅读更多...
flask web服务器：运行在云服务器上的最简单的web服务器

flask web服务器：运行在云服务器上的最简单的web服务器

上期文章我们分享了flask的基础知识以及如何安装flask&#xff0c;当你安装完成flask后&#xff0c;我们就可以打造自己的web服务器了。 首先我们打印最简单的hello world,并在浏览器中显示 from flask import Flask app Flask(__name__)app.route(/) def index():return he…
阅读更多...
AR HUD全面「上新」

AR HUD全面「上新」

AR HUD赛道正在迎来新的时代。 上周&#xff0c;蔚来ET9正式发布亮相&#xff0c;新车定位为D级行政旗舰轿车&#xff0c;其中&#xff0c;在智能座舱交互层面&#xff0c;继理想L系列、长安深蓝S7之后&#xff0c;也首次取消仪表盘&#xff0c;取而代之的是业内首个全焦段AR H…
阅读更多...
java基于SSM框架的在线学习系统设计与实现+vue论文

java基于SSM框架的在线学习系统设计与实现+vue论文

摘 要 计算机网络发展到现在已经好几十年了&#xff0c;在理论上面已经有了很丰富的基础&#xff0c;并且在现实生活中也到处都在使用&#xff0c;可以说&#xff0c;经过几十年的发展&#xff0c;互联网技术已经把地域信息的隔阂给消除了&#xff0c;让整个世界都可以即时通话…
阅读更多...
用模方软件进行模型的透明贴图，为什么翻出来透明部分是黑的？

用模方软件进行模型的透明贴图，为什么翻出来透明部分是黑的？

答&#xff1a;透贴需要用PNG格式。 模方是一款针对实景三维模型的冗余碎片、水面残缺、道路不平、标牌破损、纹理拉伸模糊等共性问题研发的实景三维模型修复编辑软件。模方4.1新增自动单体化建模功能&#xff0c;支持一键自动提取房屋结构&#xff0c;平均1栋复杂建筑物只需3…
阅读更多...
Java8常用新特性

Java8常用新特性

目录 简介 1.默认方法 2..Lambda表达式 3.Stream API 4.方法引用 5.Optional类 简介 Java 8是Java编程语言的一个重要版本&#xff0c;引入了许多令人兴奋和强大的新特性。这些特性使得Java程序更加现代化、灵活和高效。让我们一起来探索一些Java 8的常用新特性吧&#…
阅读更多...
SVN切换账户

SVN切换账户

前言&#xff08;svn切换&#xff09; 本文章简单写下SVN账户切换操作 linux 1.删除目录 ~/.subversion/auth/ 下的所有文件。 2.再次操作svn时可重新输入用户名和密码。 windows (1)在工程中单击右键,单击"TortoiseSVN"。 (2)选择"Setting"。 (3)选择&quo…
阅读更多...
怎么做微信秒杀链接_开启用户的购物新体验

怎么做微信秒杀链接_开启用户的购物新体验

微信秒杀&#xff1a;开启你的购物新体验 在繁忙的生活节奏中&#xff0c;你是否厌倦了长时间排队等待购物&#xff0c;或者在电商平台上漫长而复杂的购物流程&#xff1f;今天&#xff0c;我要向你介绍一种全新的购物方式——微信秒杀。这不仅是一种全新的购物体验&#xff0…
阅读更多...
AI语音机器人的发展

AI语音机器人的发展

第一代AI语音机器人具体投入研发的开始时间不太清楚&#xff0c;只记得2017年的下半年就已经开始接触到成型的AI语音机器人&#xff0c;并且正式商用。语音识别效果还不多&#xff0c;大多都是接入的科大讯飞或者百度的ASR。 2018年算是AI语音机器人的“青春期”吧&#xff0c;…
阅读更多...
机器人技能学习-构建自己的数据集并进行训练

机器人技能学习-构建自己的数据集并进行训练

概要 若想训练自己的场景&#xff0c;数据集的重要性不做过多赘述&#xff0c;下面就基于 robomimic 和 robosuite 构建自己的数据集进行讲解&#xff0c;同时&#xff0c;也会附上 train 和 run 的流程&#xff0c;这样&#xff0c;就形成了闭环。 自建数据集 采集数据 采…
阅读更多...
靶场实战(14)：OSCP备考之VulnHub SUNSET NOONTIDE

靶场实战(14)：OSCP备考之VulnHub SUNSET NOONTIDE

打靶思路 资产发现 主机发现服务发现漏洞发现&#xff08;获取权限&#xff09; irc服务提升权限 server用户 sudosuidcron内核提权信息收集 1、资产发现 1.1、主机发现 本次靶场SUNSET: NOONTIDE[1]指定IP&#xff0c;不涉及主机发现过程。 1.2、服务发现 使用命令sudo -u roo…
阅读更多...
3d云渲染用什么显卡比较好？3d云渲染显卡推荐

3d云渲染用什么显卡比较好？3d云渲染显卡推荐

3D云渲染能加快渲染速度&#xff0c;是众多公司的首选方案&#xff0c;作为公司负责人&#xff0c;选择哪个平台值得思考&#xff0c;今天我就说下我的选择吧。 首先我们要了解云渲染的渲染方式&#xff0c;云渲染的渲染方式分两种&#xff0c;一种是CPU渲染&#xff0c;一种是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023