鸿蒙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.mzph.cn/news/618003.shtml

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

相关文章

【面试宝典】如何对MySQL进行优化?

一、数据库设计 所有字段都设置默认值。尽可能使用较小的整数类型。尽可能定义字段为NOT NULL,除非该字段需要NULL。尽可能使用固定大小的记录格式,如CHAR,除非变长字段用VARCHAR。二、数据库使用 尽量使用长连接。使用 EXPLAIN 查看复杂SQL执行方式,进行优化。使用 LIMIT …

2024 CKA 题库 | 7、调度 pod 到指定节点

不等更新题库 文章目录 7、调度 pod 到指定节点题目:考点&#xff1a;参考链接:解答:更换 context创建 pod yaml创建 pod 检查 7、调度 pod 到指定节点 题目: 设置配置环境&#xff1a; [candidatenode-1] $ kubectl config use-context k8sTask 按如下要求调度一个 pod&…

Java Web 开发 从入门到实战(课后习题)

第1章 Web 前端基础 1.在以下标记中&#xff0c;用于改置页面标题的是&#xff08;&#xff09;。 A. <title> B. <caption> C. <head> D. <html> 注&#xff1a;caption是表格名称&#xff08;标题&#xff09; 2. 若设计网页的背景图形为bg.png&…

使用Mixtral-offloading在消费级硬件上运行Mixtral-8x7B

Mixtral-8x7B是最好的开放大型语言模型(LLM)之一&#xff0c;但它是一个具有46.7B参数的庞大模型。即使量化为4位&#xff0c;该模型也无法在消费级GPU上完全加载(例如&#xff0c;24 GB VRAM是不够的)。 Mixtral-8x7B是混合专家(MoE)。它由8个专家子网组成&#xff0c;每个子…

Linux--LNMP架构及应用部署

4.2 LNMP架构及应用部署 4.2.1构建LNMP网站平台 为了与Nginx、PHP环境保持一致&#xff0c;仍选择采用源代码编译的方式安装MySQL组件。以5.5.22 版本为例&#xff0c;安装过程如下所述。 &#xff08;1&#xff09;编译安装MySQL。 [rootnode01 ~]# yum -y install ncurses-…

Java中锁的解决方案

前言 在上一篇文章中&#xff0c;介绍了什么是锁&#xff0c;以及锁的使用场景&#xff0c;本文继续给大家继续做深入的介绍&#xff0c;介绍JAVA为我们提供的不同种类的锁。 JAVA为我们提供了种类丰富的锁&#xff0c;每种锁都有不同的特性&#xff0c;锁的使用场景也各不相…

Java 面试题 - 多线程并发篇

线程基础 创建线程有几种方式 继承Thread类 可以创建一个继承自Thread类的子类&#xff0c;并重写其run()方法来定义线程的行为。然后可以通过创建该子类的实例来启动线程。 示例代码&#xff1a; class MyThread extends Thread {public void run() {// 定义线程的行为} …

JUC02同步和锁

同步&锁 相关笔记&#xff1a;www.zgtsky.top 临界区 临界资源&#xff1a;一次仅允许一个进程使用的资源成为临界资源 临界区&#xff1a;访问临界资源的代码块 竞态条件&#xff1a;多个线程在临界区内执行&#xff0c;由于代码的执行序列不同而导致结果无法预测&am…

java : 通过jdbc读取hive(2.3)中的数据

一、准备好hive的环境&#xff0c;创建表(例如userinfo),添加数据。 create table userinfo(x string, y string); insert into userinfo values(tju,beiyang);二、启动hive服务 hive --service hiveserver2 三、项目中添加依赖 <dependency><groupId>org.apache.…

ubuntu20.04+opencv+vscode

第一次接触C的opencv&#xff0c;需要在vscode中编写cv2代码并调试。根据vscode配置C和Opencv&#xff08;ubuntu18.04&#xff09;能够正确配置&#xff0c;是一个靠谱的教程&#xff0c;现在记录一下过程&#xff0c;方面后续参考。 1、安装依赖 在终端中安装依赖&#xff…

近视的孩子用什么灯?学生考研护眼台灯推荐

随着时代快速发展&#xff0c;2022年我国近视人数达到了7亿&#xff0c;呈现低龄化趋势&#xff0c;儿童及青少年人数占了53.8%。现在学业负担都很重&#xff0c;每个家长都不希望自己的孩子近视或加深近视了&#xff0c;都会想尽一切办法保护视力。而护眼台灯就成了家长购买台…

BC3 有容乃大

描述 确定不同整型数据类型在内存中占多大&#xff08;字节&#xff09;&#xff0c;输出不同整型数据类型在内存中占多大&#xff08;字节&#xff09;。 输入描述&#xff1a; 无 输出描述&#xff1a; 不同整型数据类型在内存中占多大&#xff08;字节&#xff09;&am…

信息学奥赛一本通1957:【12NOIP普及组】质因数分解

1957&#xff1a;【12NOIP普及组】质因数分解 时间限制: 1000 ms 内存限制: 131072 KB 提交数: 13525 通过数: 7646 【题目描述】 已知正整数 n 是两个不同的质数的乘积&#xff0c;试求出较大的那个质数。 【输入】 输入只有一行&#xff0c;包含一个正整数 n。 …

Qt中QGraphicsView架构下实时鼠标绘制图形

上一章节介绍了关于QGraphicsView的基础讲解&#xff0c;以及简单的类图创建&#xff0c;由上一章节中最后展示的动画效果来看&#xff0c;今年主要讲述如何在QGraphicsView架构下&#xff0c;实时拖动鼠标绘制图形&#xff01; 今天主要以矩形为例&#xff0c;再来看一下展示…

苹果电脑RAW图像处理软件Capture One Pro 22 mac软件介绍

Capture One Pro 22 for mac是一款专业的RAW文件转换器和图像编辑软件&#xff0c;拥有更新的处理引擎、市场领先的性能和强大的新功能&#xff0c;可为 500 多台高端相机提供具有美丽色彩和令人难以置信的细节的终极图像质量。 Capture One Pro 22 for Mac版软件介绍 Capture…

Vue-17、Vue人员列表过滤(案例)

1、watch实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>列表渲染过滤</title><script type"text/javascript" src"https://cdn.jsdelivr.net/npm/vue2/dist/vue.js&qu…

用pytorch给深度学习加速:正交与谱归一化技术

目录 torch.nn参数优化 parametrizations.orthogonal 用途 用法 使用技巧 参数 注意事项 示例代码 parametrizations.spectral_norm 用途 用法 使用技巧 参数 注意事项 示例代码 总结 torch.nn参数优化 parametrizations.orthogonal 这个torch.nn.utils.para…

谷歌浏览器访问微信内链接

一、打开谷歌浏览器f12开发者模式 二、点击网络&#xff0c;已停用节流模式&#xff0c;选择自定义添加 三、点击设备&#xff0c;添加自定义设备&#xff0c;天上名称&#xff0c;在用户代理字符串里填上下面代码 Mozilla/5.0 (Linux; Android 7.1.; MI Build/NMF26X; wv) A…

CCRC认证的级别以及办理条件

CCRC认证的级别 CCRC信息安全服务资质&#xff0c;分为三级&#xff0c;分别是一级、二级、三级&#xff0c;还包含7个类别。其中一级最高&#xff0c;三级最低&#xff0c;资质级别是衡量服务提供者服务能力的尺度。 三个级别介绍 一级资质&#xff1a;不仅对企业规模、业务…

JavaScript Web Worker用法指南

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》 ​ ​ ✨ 前言 Web Worker可以将耗时任务放到后台执行,避免阻塞UI。本文将详细介绍Web Worker的用法,让你…