鸿蒙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.rhkb.cn/news/236583.html

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

相关文章

如何设置gitlab.rb 将所有数据运行目录放置到指定目录

如何设置gitlab.rb 将所有数据运行目录放置到指定目录

如何设置gitlab.rb 将所有数据运行目录放置到指定目录 在GitLab中&#xff0c;要将所有数据目录&#xff08;包括仓库、日志和其他配置文件&#xff09;移动到一个自定义位置&#xff0c;你需要编辑GitLab的配置文件 /etc/gitlab/gitlab.rb。这里主要关注的是 git_data_dir 配置…
阅读更多...
无心剑中译卡明斯《从未游历之地》

无心剑中译卡明斯《从未游历之地》

Somewhere I Have Never Travelled 从未游历之地 Edward Estlin Cummings 爱德华埃斯特林卡明斯 somewhere i have never traveled, gladly beyond any experience, your eyes have their silence: in your most frail gesture are things which enclose me or which i can…
阅读更多...
【VRTK】【Unity】【游戏开发】更多技巧

【VRTK】【Unity】【游戏开发】更多技巧

课程配套学习项目源码资源下载 https://download.csdn.net/download/weixin_41697242/88485426?spm=1001.2014.3001.5503 【概述】 本篇将较为零散但常用的VRTK开发技巧集合在一起，主要内容： 创建物理手震动反馈高亮互动对象【创建物理手】 非物理手状态下，你的手会直接…
阅读更多...
Python异步编程｜PySimpleGUI界面读取PDF转换Excel

Python异步编程｜PySimpleGUI界面读取PDF转换Excel

目录 实例要求 原始pdf文件格式 输出xls文件格式 运行界面 完整代码 代码分析 遍历表格 布局界面 控件简介 写入表格 表格排序 事件循环 异步编程 实例要求 使用PySimpleGUI做一个把单位考勤系统导出的pdf文件合并输出Excel的应用&#xff0c;故事出自&#xff1…
阅读更多...
Playwright 结合 Selenium Grid - 1.windows 环境使用教程

Playwright 结合 Selenium Grid - 1.windows 环境使用教程

Playwright 可以连接到运行 Selenium 4 的 Selenium Grid Hub 来启动 Google Chrome 或 Microsoft Edge 浏览器，而不是在本地机器上运行浏览器。 下载Selenium Grid 打开selenium官方https://www.selenium.dev/downloads/下载Selenium Server (Grid) 目前最新版本4.16.1 下…
阅读更多...
FPGA高端项目：12G-SDI 视频编解码，提供工程源码和技术支持

FPGA高端项目：12G-SDI 视频编解码，提供工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的 GT 高速接口解决方案我目前已有的SDI编解码方案 3、详细设计方案设计框图UltraScale GTH 的SDI模式应用UltraScale GTH 基本结构参考时钟的选择和分配UltraScale GTH 发送和接收处理流程UltraScale GTH 发送接口UltraScale G…
阅读更多...
73应急响应-Web分析phpjavaWeb自动化工具

73应急响应-Web分析phpjavaWeb自动化工具

我感觉学完渗透自然就会应急响应&#xff0c;之前又发过应急响应的文章 应急响应笔记就开始比较潦草 应急响应基础知识 应急响应流程 保护阶段&#xff08;断网&#xff0c;避免继续渗透&#xff1b;备份&#xff09;&#xff0c;分析阶段&#xff08;分析攻击行为&#xf…
阅读更多...
C++|44.智能指针

C++|44.智能指针

文章目录 智能指针unique_ptr特点一——无法进行复制 shared_ptr特点一——可复制特点二——计数器&#xff08;用于确定删除的时机&#xff09; 其他 智能指针 通常的指针是需要特殊地去申请对应的空间&#xff0c;并在不使用的时候还需要人工去销毁。 而智能指针相对普通的指…
阅读更多...
用模方软件进行模型的透明贴图，为什么翻出来透明部分是黑的？

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

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

了解ASP.NET Core 中的文件提供程序

写在前面 ASP.NET Core 通过文件提供程序来抽象化文件系统访问。分为物理文件提供程序(PhysicalFileProvider)和清单嵌入的文件提供程序(ManifestEmbeddedFileProvider)还有复合文件提供程序(CompositeFileProvider )&#xff1b;其中PhysicalFileProvider 提供对物理文件系统…
阅读更多...
1panel中的sftpgo webadmin 更新修改docker容器文件的配置教程

1panel中的sftpgo webadmin 更新修改docker容器文件的配置教程

本篇文章主要讲解1panel中的sftpgo webadmin 更新修改docker容器文件的配置教程&#xff0c;适合sftpgo webadmin和1panel系统用户配置时使用。 作者&#xff1a;任聪聪 rccblogs.com 日期&#xff1a;2024年1月8日 sftpgo是无法直接直接更改容器内部的网站目录的&#xff0c;但…
阅读更多...
uniapp 如何使用echarts 以及解决tooltip自定义不生效问题

uniapp 如何使用echarts 以及解决tooltip自定义不生效问题

使用的是echarts-for-wx插件&#xff1b; 正常写法案例&#xff1a;给tooltip数值加个% <template><view><uni-ec-canvas class"uni-ec-canvas"id"uni-ec-canvas"ref"canvas"canvas-id"uni-ec-canvas":ec"ec&quo…
阅读更多...
使用nginx+HTML2canvas将任意html网页转为png图片自定义张数

使用nginx+HTML2canvas将任意html网页转为png图片自定义张数

文章目录 概述网页的转换html2canvas的使用导入导入HTML2canvas库函数定义 nginx部署编写控制截图网页代码iframe 网页控制代码 测试说明 概述 本文简述如何使用nginxhtml2canvas将任意网页html转为png图片 网页的转换 如果是本地网页&#xff0c;直接进行nginx反向代理就行…
阅读更多...
vue3dLoader Cannot read properties of null (reading ‘setCrossOrigin‘)“这个报错怎么解决?

vue3dLoader Cannot read properties of null (reading ‘setCrossOrigin‘)“这个报错怎么解决?

默认情况下crossOrigin默认值是“anonymous” 如果出现报错的情况 请设置crossOrigin为空字符串即可。如&#xff1a; <vue3dLoader crossOrigin""> 相关阅读 推荐&#xff1a;vue-3d-loader支持.dae/.fbx/.gltf/.glb/.obj/.ply/.stl/.json&#xff0c;并支…
阅读更多...
5G前装搭载率即将迈过10%大关，车载通讯进入多层次增长通道

5G前装搭载率即将迈过10%大关，车载通讯进入多层次增长通道

对于智能化来说&#xff0c;车载通讯性能的提升&#xff0c;对于相关功能的用户体验优化、进一步减少通讯时延以及打开应用新空间&#xff0c;至关重要。 目前&#xff0c;2G/3G正在进入运营商逐步关闭运营的阶段&#xff0c;4G依然是主力&#xff0c;但5G也在迎来新的增长机会…
阅读更多...
vue3 生命周期

vue3 生命周期

与 2.x 版本生命周期相对应的组合式 API beforeCreate -> 使用 setup() created -> 使用 setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnmount destroye…
阅读更多...
Fedora Linux 中安装 nginx

Fedora Linux 中安装 nginx

Fedora 35 中安装 nginx 的方法非常简单。 运行下面的命令&#xff1a; sudo dnf install nginx 在提示你需要确认的地方&#xff0c;输入 y 后回车即可。 开机自动启动 如果你希望在你的操作系统重启的时候自动启动 nginx&#xff0c;请输入下面的命令&#xff1a; syst…
阅读更多...
百度吉利合作造车生态，极越“智价比”能否带来科技平权？

百度吉利合作造车生态，极越“智价比”能否带来科技平权？

文|AUTO芯球 作者|文泽 临近年关&#xff0c;车企迎来“降价潮”。为了获得更好的年终成绩单&#xff0c;包括上汽大众、比亚迪、长安汽车、智己汽车等20多家品牌推出了购车补贴、限时优惠等措施&#xff0c;优惠幅度最高近20万元。 在此背景下&#xff0c;新车发布一个多月…
阅读更多...
双指针问题——求只包含两个元素的最长连续子序列（子数组）

双指针问题——求只包含两个元素的最长连续子序列（子数组）

一&#xff0c;题目描述 你正在探访一家农场&#xff0c;农场从左到右种植了一排果树。这些树用一个整数数组 fruits 表示&#xff0c;其中 fruits[i] 是第 i 棵树上的水果 种类 。 你想要尽可能多地收集水果。然而&#xff0c;农场的主人设定了一些严格的规矩&#xff0c;你必…
阅读更多...
AOT-GAN-for-Inpainting项目解读|使用AOT-GAN进行图像修复

AOT-GAN-for-Inpainting项目解读|使用AOT-GAN进行图像修复

项目地址&#xff1a; https://github.com/researchmm/AOT-GAN-for-Inpainting 基于pytorch实现 论文地址&#xff1a; https://arxiv.org/abs/2104.01431 开源时间&#xff1a; 2021年 项目简介&#xff1a; AOT-GAN-for-Inpainting是一个开源的图像修复项目&#xff0c;其对 …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023