HarmonyOS（二十）——管理应用拥有的状态之LocalStorage（页面级UI状态存储）

LocalStorage是页面级的UI状态存储，通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage也可以在UIAbility实例内，在页面间共享状态。

本文仅介绍LocalStorage使用场景和相关的装饰器：@LocalStorageProp和@LocalStorageLink。

注意⚠️：本模块从API version 9开始支持。

概述

LocalStorage是ArkTS为构建页面级别状态变量提供存储的内存内“数据库”。

  • 应用程序可以创建多个LocalStorage实例，LocalStorage实例可以在页面内共享，也可以通过GetShared接口，实现跨页面、UIAbility实例内共享。
  • 组件树的根节点，即被@Entry装饰的@Component，可以被分配一个LocalStorage实例，此组件的所有子组件实例将自动获得对该LocalStorage实例的访问权限；
  • 被@Component装饰的组件最多可以访问一个LocalStorage实例和AppStorage，未被@Entry装饰的组件不可被独立分配LocalStorage实例，只能接受父组件通过@Entry传递来的LocalStorage实例。一个LocalStorage实例在组件树上可以被分配给多个组件。
  • LocalStorage中的所有属性都是可变的。

应用程序决定LocalStorage对象的生命周期。当应用释放最后一个指向LocalStorage的引用时，比如销毁最后一个自定义组件，LocalStorage将被JS Engine垃圾回收。

LocalStorage根据与@Component装饰的组件的同步类型不同，提供了两个装饰器：

  • @LocalStorageProp：@LocalStorageProp装饰的变量和与LocalStorage中给定属性建立单向同步关系。
  • @LocalStorageLink：@LocalStorageLink装饰的变量和在@Component中创建与LocalStorage中给定属性建立双向同步关系。

限制条件

  • LocalStorage创建后，命名属性的类型不可更改。后续调用Set时必须使用相同类型的值。
  • LocalStorage是页面级存储，GetShared接口仅能获取当前Stage通过windowStage.loadContent传入的LocalStorage实例，否则返回undefined。例子可见将LocalStorage实例从UIAbility共享到一个或多个视图。

@LocalStorageProp

在上文中已经提到，如果要建立LocalStorage和自定义组件的联系，需要使用@LocalStorageProp和@LocalStorageLink装饰器。使用@LocalStorageProp(key)/@LocalStorageLink(key)装饰组件内的变量，key标识了LocalStorage的属性。

当自定义组件初始化的时候，@LocalStorageProp(key)/@LocalStorageLink(key)装饰的变量会通过给定的key，绑定LocalStorage对应的属性，完成初始化。本地初始化是必要的，因为无法保证LocalStorage一定存在给定的key（这取决于应用逻辑是否在组件初始化之前在LocalStorage实例中存入对应的属性）。

⚠️注意：
从API version 9开始，该装饰器支持在ArkTS卡片中使用。

@LocalStorageProp(key)是和LocalStorage中key对应的属性建立单向数据同步，我们允许本地改变的发生，但是对于@LocalStorageProp，本地的修改永远不会同步回LocalStorage中，相反，如果LocalStorage给定key的属性发生改变，改变会被同步给@LocalStorageProp，并覆盖掉本地的修改。

装饰器使用规则说明

@LocalStorageProp变量装饰器说明
装饰器参数key：常量字符串，必填（字符串需要有引号）。
允许装饰的变量类型Object、class、string、number、boolean、enum类型，以及这些类型的数组。嵌套类型的场景请参考观察变化和行为表现。类型必须被指定，且必须和LocalStorage中对应属性相同。不支持any，不允许使用undefined和null。
同步类型单向同步：从LocalStorage的对应属性到组件的状态变量。组件本地的修改是允许的，但是LocalStorage中给定的属性一旦发生变化，将覆盖本地的修改。
被装饰变量的初始值必须指定，如果LocalStorage实例中不存在属性，则作为初始化默认值，并存入LocalStorage中。

变量的传递/访问规则说明

传递/访问说明
从父节点初始化和更新禁止，@LocalStorageProp不支持从父节点初始化，只能从LocalStorage中key对应的属性初始化，如果没有对应key的话，将使用本地默认值初始化。
初始化子节点支持，可用于初始化@State、@Link、@Prop、@Provide。
是否支持组件外访问否

@LocalStorageProp初始化规则图示
在这里插入图片描述

观察变化和行为表现

观察变化

  • 当装饰的数据类型为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变量装饰器说明
装饰器参数key：常量字符串，必填（字符串需要有引号）。
允许装饰的变量类型Object、class、string、number、boolean、enum类型，以及这些类型的数组。嵌套类型的场景请参考观察变化和行为表现。类型必须被指定，且必须和LocalStorage中对应属性相同。不支持any，不允许使用undefined和null。
同步类型双向同步：从LocalStorage的对应属性到自定义组件，从自定义组件到LocalStorage对应属性。
被装饰变量的初始值必须指定，如果LocalStorage实例中不存在属性，则作为初始化默认值，并存入LocalStorage中。

变量的传递/访问规则说明

传递/访问说明
从父节点初始化和更新禁止，@LocalStorageLink不支持从父节点初始化，只能从LocalStorage中key对应的属性初始化，如果没有对应key的话，将使用本地默认值初始化。
初始化子节点支持，可用于初始化@State、@Link、@Prop、@Provide。
是否支持组件外访问否

@LocalStorageLink初始化规则图示
在这里插入图片描述

观察变化和行为表现

观察变化
  1. 当装饰的数据类型为boolean、string、number类型时，可以观察到数值的变化。
  2. 当装饰的数据类型为class或者Object时，可以观察到赋值和属性赋值的变化，即Object.keys(observedObject)返回的所有属性。
  3. 当装饰的对象是array时，可以观察到数组添加、删除、更新数组单元的变化。
框架行为
  1. 当@LocalStorageLink(key)装饰的数值改变被观察到时，修改将被同步回LocalStorage对应属性键值key的属性中。
  2. LocalStorage中属性键值key对应的数据一旦改变，属性键值key绑定的所有的数据（包括双向@LocalStorageLink和单向@LocalStorageProp）都将同步修改。
  3. 当@LocalStorageLink(key)装饰的数据本身是状态变量，它的改变不仅仅会同步回LocalStorage中，还会引起所属的自定义组件的重新渲染。

使用场景

应用逻辑使用LocalStorage

let storage = new LocalStorage({ 'PropA': 47 }); // 创建新实例并使用给定对象初始化
let propA = storage.get('PropA') // propA == 47
let link1 = storage.link('PropA'); // link1.get() == 47
let link2 = storage.link('PropA'); // link2.get() == 47
let prop = storage.prop('PropA'); // prop.get() = 47
link1.set(48); // two-way sync: link1.get() == link2.get() == prop.get() == 48
prop.set(1); // one-way sync: prop.get()=1; but link1.get() == link2.get() == 48
link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49

从UI内部使用LocalStorage

除了应用程序逻辑使用LocalStorage，还可以借助LocalStorage相关的两个装饰器@LocalStorageProp和@LocalStorageLink，在UI组件内部获取到LocalStorage实例中存储的状态变量。

本示例以@LocalStorageLink为例，展示了：

  • 使用构造函数创建LocalStorage实例storage；
  • 使用@Entry装饰器将storage添加到CompA顶层组件中；
  • @LocalStorageLink绑定LocalStorage对给定的属性，建立双向数据同步。
// 创建新实例并使用给定对象初始化
let storage = new LocalStorage({ 'PropA': 47 });@Component
struct Child {// @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定@LocalStorageLink('PropA') storLink2: number = 1;build() {Button(`Child from LocalStorage ${this.storLink2}`)// 更改将同步至LocalStorage中的'PropA'以及Parent.storLink1.onClick(() => this.storLink2 += 1)}
}
// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct CompA {// @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定@LocalStorageLink('PropA') storLink1: number = 1;build() {Column({ space: 15 }) {Button(`Parent from LocalStorage ${this.storLink1}`) // initial value from LocalStorage will be 47, because 'PropA' initialized already.onClick(() => this.storLink1 += 1)// @Component子组件自动获得对CompA LocalStorage实例的访问权限。Child()}}
}

@LocalStorageProp和LocalStorage单向同步的简单场景

在下面的示例中，CompA 组件和Child组件分别在本地创建了与storage的’PropA’对应属性的单向同步的数据，我们可以看到：

  • CompA中对this.storProp1的修改，只会在CompA中生效，并没有同步回storage；
  • Child组件中，Text绑定的storProp2 依旧显示47。
// 创建新实例并使用给定对象初始化
let storage = new LocalStorage({ 'PropA': 47 });
// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct CompA {// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定@LocalStorageProp('PropA') storProp1: number = 1;build() {Column({ space: 15 }) {// 点击后从47开始加1，只改变当前组件显示的storProp1，不会同步到LocalStorage中Button(`Parent from LocalStorage ${this.storProp1}`).onClick(() => this.storProp1 += 1)Child()}}
}@Component
struct Child {// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定@LocalStorageProp('PropA') storProp2: number = 2;build() {Column({ space: 15 }) {// 当CompA改变时，当前storProp2不会改变，显示47Text(`Parent from LocalStorage ${this.storProp2}`)}}
}

@LocalStorageLink和LocalStorage双向同步的简单场景

下面的示例展示了@LocalStorageLink装饰的数据和LocalStorage双向同步的场景

// 构造LocalStorage实例
let storage = new LocalStorage({ 'PropA': 47 });
// 调用link（api9以上）接口构造'PropA'的双向同步数据，linkToPropA 是全局变量
let linkToPropA = storage.link('PropA');@Entry(storage)
@Component
struct CompA {// @LocalStorageLink('PropA')在CompA自定义组件中创建'PropA'的双向同步数据，初始值为47，因为在构造LocalStorage已经给“PropA”设置47@LocalStorageLink('PropA') storLink: number = 1;build() {Column() {Text(`incr @LocalStorageLink variable`)// 点击“incr @LocalStorageLink variable”，this.storLink加1，改变同步回storage，全局变量linkToPropA也会同步改变 .onClick(() => this.storLink += 1)// 并不建议在组件内使用全局变量linkToPropA.get()，因为可能会有生命周期不同引起的错误。Text(`@LocalStorageLink: ${this.storLink} - linkToPropA: ${linkToPropA.get()}`)}}
}

兄弟节点之间同步状态变量

下面的示例展示了通过@LocalStorageLink双向同步兄弟节点之间的状态。

先看Parent自定义组件中发生的变化：

  1. 点击“playCount ${this.playCount} dec by 1”，this.playCount减1，修改同步回LocalStorage中，Child组件中的playCountLink绑定的组件会同步刷新；
  2. 点击“countStorage ${this.playCount} incr by 1”，调用LocalStorage的set接口，更新LocalStorage中“countStorage”对应的属性，Child组件中的playCountLink绑定的组件会同步刷新；
  3. Text组件“playCount in LocalStorage for debug ${storage.get(‘countStorage’)}”没有同步刷新，因为storage.get(‘countStorage’)返回的是常规变量，常规变量的更新并不会引起Text组件的重新渲染。

Child自定义组件中的变化：playCountLink的刷新会同步回LocalStorage，并且引起兄弟组件和父组件相应的刷新。

let storage = new LocalStorage({ countStorage: 1 });@Component
struct Child {// 子组件实例的名字label: string = 'no name';// 和LocalStorage中“countStorage”的双向绑定数据@LocalStorageLink('countStorage') playCountLink: number = 0;build() {Row() {Text(this.label).width(50).height(60).fontSize(12)Text(`playCountLink ${this.playCountLink}: inc by 1`).onClick(() => {this.playCountLink += 1;}).width(200).height(60).fontSize(12)}.width(300).height(60)}
}@Entry(storage)
@Component
struct Parent {@LocalStorageLink('countStorage') playCount: number = 0;build() {Column() {Row() {Text('Parent').width(50).height(60).fontSize(12)Text(`playCount ${this.playCount} dec by 1`).onClick(() => {this.playCount -= 1;}).width(250).height(60).fontSize(12)}.width(300).height(60)Row() {Text('LocalStorage').width(50).height(60).fontSize(12)Text(`countStorage ${this.playCount} incr by 1`).onClick(() => {storage.set<number>('countStorage', 1 + storage.get<number>('countStorage'));}).width(250).height(60).fontSize(12)}.width(300).height(60)Child({ label: 'ChildA' })Child({ label: 'ChildB' })Text(`playCount in LocalStorage for debug ${storage.get<number>('countStorage')}`).width(300).height(60).fontSize(12)}}
}

将LocalStorage实例从UIAbility共享到一个或多个视图

上面的实例中，LocalStorage的实例仅仅在一个@Entry装饰的组件和其所属的子组件（一个页面）中共享，如果希望其在多个视图中共享，可以在所属UIAbility中创建LocalStorage实例，并调用windowStage.loadContent。

// EntryAbility.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';export default class EntryAbility extends UIAbility {
para:Record<string, number> = { 'PropA': 47 };
storage: LocalStorage = new LocalStorage(this.para);onWindowStageCreate(windowStage: window.WindowStage) {
windowStage.loadContent('pages/Index', this.storage);
}
}

⚠️ 注意：
在UI页面通过getShared接口获取在通过loadContent共享的LocalStorage实例。
LocalStorage.getShared只在模拟器或者实机上才有效，不能在Preview预览器中使用。

在下面的用例中，Index页面中的propA通过getShared()方法获取到共享的LocalStorage实例。点击Button跳转到Page页面，点击Change propA改变propA的值，back回Index页面后，页面中propA的值也同步修改。

// index.ets
import router from '@ohos.router';// 通过getShared接口获取stage共享的LocalStorage实例
let storage = LocalStorage.getShared()
@Entry(storage)
@Component
struct Index {// can access LocalStorage instance using // @LocalStorageLink/Prop decorated variables@LocalStorageLink('PropA') propA: number = 1;build() {Row() {Column() {Text(`${this.propA}`).fontSize(50).fontWeight(FontWeight.Bold)Button("To Page").onClick(() => {router.pushUrl({url:'pages/Page'})})}.width('100%')}.height('100%')}
}// Page.ets
import router from '@ohos.router';let storage = LocalStorage.getShared()
@Entry(storage)
@Component
struct Page {@LocalStorageLink('PropA') propA: number = 2;build() {Row() {Column() {Text(`${this.propA}`).fontSize(50).fontWeight(FontWeight.Bold)Button("Change propA").onClick(() => {this.propA = 100;})Button("Back Index").onClick(() => {router.back()})}.width('100%')}}
}

⚠️ 注意：
对于开发者更建议使用这个方式来构建LocalStorage的实例，并且在创建LocalStorage实例的时候就写入默认值，因为默认值可以作为运行异常的备份，也可以用作页面的单元测试。

总结

LocalStorage是页面级的UI状态存储，通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage也可以在UIAbility实例内，在页面间共享状态。

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

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

相关文章

智慧城市革命，物联网技术如何改变城市治理与生活方式

智慧城市革命，物联网技术如何改变城市治理与生活方式

随着科技的不断进步&#xff0c;智慧城市已经成为现代城市发展的重要方向之一。物联网技术作为智慧城市的重要支撑&#xff0c;正深刻改变着城市的治理模式和居民的生活方式。本文将探讨智慧城市革命&#xff0c;以及物联网技术如何改变城市治理与生活方式&#xff0c;同时介绍…
阅读更多...
贪心算法（两个实例)

贪心算法（两个实例)

例一&#xff1a;调度问题 问题&#xff1a;由n项任务&#xff0c;每项任务的加工时间已知&#xff0c;从零时刻开始陆续加入一台机器上去加工&#xff0c;每个任务完成的时间是从0时刻到任务加工截至的时间。 求总完成时间&#xff08;所有任务完成时间最短计划方案&#xf…
阅读更多...
游戏服务端配置“热更”及“秒启动”终极方案（golang/ygluu/卢益贵）

游戏服务端配置“热更”及“秒启动”终极方案（golang/ygluu/卢益贵）

游戏服务端配置“热更”及“秒启动”终极方案&#xff08;golang/ygluu/卢益贵&#xff09; 关键词&#xff1a;游戏微服务架构、游戏服务端热更、模块化解耦、golang 一、前言 众所周知&#xff0c;游戏服务端配置信息热更有几大问题&#xff08;非lua架构&#xff09;&…
阅读更多...
【Machine Learning】Suitable Learning Rate in Machine Learning

【Machine Learning】Suitable Learning Rate in Machine Learning

一、The cases of different learning rates: In the gradient descent algorithm model: is the learning rate of the demand, how to determine the learning rate, and what impact does it have if it is too large or too small? We will analyze it through the follow…
阅读更多...
wsl ubuntu 安装的正确方式

wsl ubuntu 安装的正确方式

目录 wsl ubuntu 安装的正确方式&#xff1a; 将wsl2设置为默认版本&#xff1a; 1、打开powershell 2、设置wsl的版本为2 ​编辑 3、更新wsl程序 4、强制关闭子系统 5、查看wsl支持的列表 6、安装指定版本的系统 wsl ubuntu 安装的正确方式&#xff1a; 此时&#xff0c…
阅读更多...
NCV4275CDT50RKG稳压器芯片中文资料规格书PDF数据手册引脚图图片价格功能

NCV4275CDT50RKG稳压器芯片中文资料规格书PDF数据手册引脚图图片价格功能

产品概述&#xff1a; NCV4275C 是一款低漏稳压器&#xff0c;可用于严酷汽车环境。它包括了较宽的运行温度范围和输出电压范围。输出调节为 5.0 V 或 3.3 V&#xff0c;额定输出电流为 450 mA。它还提供过电流保护、超温保护和可编程微处理器重置等多种功能。NCV4275C 采用 D…
阅读更多...
【LeetCode热题100】148. 排序链表（链表）

【LeetCode热题100】148. 排序链表（链表）

一.题目要求 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 二.题目难度 中等 三.输入样例 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4] 示例 2&#xff1a; 输入&#xff1a;head [-1,5,3,4,0] 输…
阅读更多...
【ArcGISPro】道路数据下载并使用

【ArcGISPro】道路数据下载并使用

下载 下载链接： Geofabrik 下载服务器 这些数据通常 每天更新。 下载结果 arcmap用户下载工具 10.2：http://www.arcgis.com/home/item.html?id=16970017f81349548d0a9eead0ebba39 10.3：
阅读更多...
计算机网络——物理层（编码与调制）

计算机网络——物理层（编码与调制）

计算机网络——编码与调制 基带信号和宽带信号编码与调制数字数据编码为数字信号非归零编码归零编码反向不归零编码曼彻斯特编码差分曼彻斯特编码4B/5B编码 数字数据调制为模拟信号模拟数据编码为数字信号模拟数据调制为模拟信号 我们之前讲了物理层的一些基础知识和两个准则&a…
阅读更多...
springboot白优校园社团网站的设计与实现

springboot白优校园社团网站的设计与实现

摘 要 近些年来&#xff0c;随着科技的飞速发展&#xff0c;互联网的普及逐渐延伸到各行各业中&#xff0c;给人们生活带来了十分的便利&#xff0c;白优校园社团网站利用计算机网络实现信息化管理&#xff0c;使整个白优校园社团网站的发展和服务水平有显著提升。 本文拟采用…
阅读更多...
Qt QTableWidget 实现行选中及行悬浮高亮

Qt QTableWidget 实现行选中及行悬浮高亮

表格整行的 selected、hover 高亮需求很常见&#xff0c;但使用 Qt 提供的开箱即用的方法根本无法实现这个需求&#xff08;至少在当前的时间节点是不行的&#xff09;&#xff1b;想要实现这个效果必须要费一点点力气&#xff0c;我们尽量选择较为简单的方法。 话不多说&…
阅读更多...
NeRF学习——NeRF-Pytorch的源码解读

NeRF学习——NeRF-Pytorch的源码解读

学习 github 上 NeRF 的 pytorch 实现项目&#xff08;https://github.com/yenchenlin/nerf-pytorch&#xff09;的一些笔记 1 参数 部分参数配置&#xff1a; 训练参数&#xff1a; 这段代码是在设置一些命令行参数&#xff0c;这些参数用于控制NeRF&#xff08;Neural Radi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023