HarmonyOS | 状态管理(六) | LocalStorage(页面级UI状态存储)

系列文章目录

1.HarmonyOS | 状态管理(一) | @State装饰器
2.HarmonyOS | 状态管理(二) | @Prop装饰器
3.HarmonyOS | 状态管理(三) | @Link装饰器
4.HarmonyOS | 状态管理(四) | @Provide和@Consume装饰器
5.HarmonyOS | 状态管理(五) | @Observed装饰器和@ObjectLink装饰器


文章目录

  • 系列文章目录
  • 前言
  • 一、LocalStorage 是 什么?
  • 二、特性
  • 三、LocalStorage 使用场景
  • 四、两种不同的同步类型装饰器
    • 1. @LocalStorageProp 装饰器 (单向同步)
    • 2. @LocalStorageLink 装饰器 (双向同步)
    • 3. 将LocalStorage实例从UIAbility共享到一个或多个视图
  • 总结


前言

以上文章介绍的 装饰器 仅能页面内,即一个组件树上共享状态变量,后续文章讲解应用级的状态管理。
本篇文章我们讲解的是:LocalStorage (页面级UI状态存储)


一、LocalStorage 是 什么?

页面级UI状态存储,通常用于UIAbility内、页面间的状态共享

二、特性

  • 应用程序可以创建多个LocalStorage实例,LocalStorage实例可以在页面内共享,也可以通过GetShared接口,实现跨页面、UIAbility实例内共享。

  • 组件树的根节点,即被@Entry装饰的@Component,可以被分配一个LocalStorage实例,此组件的所有子组件实例将自动获得对该LocalStorage实例的访问权限。

  • 被@Component装饰的组件最多可访问一个LocalStorage实例,未被@Entry装饰的组件不可被独立分配LocalStorage实例,只能接受父组件通过@Entry传递来的LocalStorage实例。

  • 一个LocalStorage实例在组件树上可以被分配给多个组件。

  • LocalStorage中的所有属性都是可变的。

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

三、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

四、两种不同的同步类型装饰器

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

@LocalStorageProp:@LocalStorageProp 装饰的变量与LocalStorage中给定属性建立单向同步关系。
@LocalStorageLink:@LocalStorageLink 装饰的变量与LocalStorage中给定属性建立双向同步关系。

1. @LocalStorageProp 装饰器 (单向同步)

let storageProp = new LocalStorage({ 'PropA': 47 });@Entry(storageProp)
@Component
struct LocalStoragePropPage {// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定@LocalStorageProp('PropA') storagePropOne: number = 1;build() {Column({ space: 15 }) {// 点击后从47开始加1,只改变当前组件显示的storagePropOne,不会同步到LocalStorage中Button(`Parent from LocalStorage ${this.storagePropOne}`).onClick(() => this.storagePropOne += 1)ChildProp()}}
}@Component
struct ChildProp {// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定@LocalStorageProp('PropA') storagePropTwo: number = 2;build(){Column({ space: 15 }) {// 当LocalStoragePropPage改变时,当前storagePropTwo不会改变,显示47Text(`Parent from LocalStorage ${this.storagePropTwo}`)}}
}
  • LocalStoragePropPage 中对 this.storagePropOne 的修改,只会在 LocalStoragePropPage 中生效,并没有同步回 storageProp ;
  • Child 组件中,Text 绑定的 storagePropTwo 依旧显示47。

2. @LocalStorageLink 装饰器 (双向同步)

let storage = new LocalStorage({ 'PropA': 50 });@Component
struct Child{// @LocalStorageLink 与 LocalStorage中的'PropA'属性建立双向绑定@LocalStorageLink('PropA') storageLinkTwo : number = 1;build(){Button(`Child from LocalStorage ${this.storageLinkTwo}`)// 更改将同步至LocalStorage中的'PropA'以及Parent.storageLinkOne.onClick(()=> this.storageLinkTwo += 1)}
}// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct LocalStoragePager {// @LocalStorageLink 与 LocalStorage中的'PropA'属性建立双向绑定@LocalStorageLink('PropA') storageLinkOne : number = 1build() {Column({ space: 15 }) {Button(`Parent from LocalStorage ${this.storageLinkOne}`).onClick(() => this.storageLinkOne += 1)// @Component子组件自动获得对LocalStoragePager LocalStorage实例的访问权限。Child()}}
}
  • 使用构造函数创建LocalStorage实例storage;
  • 使用@Entry装饰器将storage添加到LocalStoragePager顶层组件中;
  • @LocalStorageLink绑定LocalStorage对给定的属性,建立双向数据同步。

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

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

import UIAbility from '@ohos.app.ability.UIAbility';
import hilog from '@ohos.hilog';
import window from '@ohos.window';let para:Record<string,number> = { 'PropB': 47 };
let localStorage: LocalStorage = new LocalStorage(para);export default class EntryAbility extends UIAbility {storage: LocalStorage = localStorageonWindowStageCreate(windowStage: window.WindowStage) {hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');windowStage.loadContent('pages/status/LocalStorageUIAbilityPage', this.storage);}
}
// 通过GetShared接口获取stage共享的LocalStorage实例
let storages = LocalStorage.GetShared()@Entry(storages)
@Component
struct LocalStorageUIAbilityPage {@LocalStorageLink('PropB') varA: number = 1;build() {Column() {Text(`${this.varA}`).fontSize(50)}}
}

注:

  • 在UI页面通过getShared接口获取在通过loadContent共享的LocalStorage实例。

  • LocalStorage.getShared只在模拟器或者实机上才有效,不能在Preview预览器中使用。


总结

1.LocalStorage实例可以在页面内共享,也可以通过GetShared接口,实现跨页面、UIAbility实例内共享。

2.@LocalStorageProp 装饰的变量与LocalStorage中给定属性建立单向同步关系。

3.@LocalStorageLink 装饰的变量与LocalStorage中给定属性建立双向同步关系。

4.通过windowStage.loadContent设置LocalStorage的属性,可以在多个页面共享该属性值。

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

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

相关文章

该类型的 CollectionView 不支持从调度程序线程以外的线程对其 SourceCollection 进行的更改。

报错原因 在异步的时候&#xff0c;调用了其他异步&#xff0c;导致UI工程线程该变了数据源&#xff0c;所以只需要将线程变为原始的UI线程。 解决方案 await QueuedTask.Run(() > { Application.Current.Dispatcher.Invoke(() >{报错的代码&#xff0c;…

红外测温仪芯片方案开发设计

红外测温仪由光学系统、光电探测器、信号放大器及信号处理、显示输出等部分组成。光学系统汇集其视场内的目标红外辐射能量&#xff0c;视场的大小由测温仪的光学零件以及位置决定。被测物体辐射的红外首先进入测温仪的光学系统&#xff0c;再由光学系统汇聚射入的红外线&#…

【探索AI】十 深度学习如何入门

深度学习概念 深度学习是一种机器学习的方法&#xff0c;通过构建和训练多层神经网络来解决复杂的模式识别和决策任务。以下是与深度学习相关的一些基本概念&#xff1a; 神经网络&#xff1a;神经网络是由大量的人工神经元&#xff08;节点&#xff09;组成的计算模型。它们通…

前端程序员如何使用GPT

前端程序员如何使用GPT GPT自述 GPT&#xff08;Generative Pre-trained Transformer&#xff09;是一种基于深度学习的自然语言处理模型&#xff0c;它在近年来取得了非常显著的成果。许多前端程序员也开始尝试使用GPT来提升工作效率和创造力。那么&#xff0c;前端程序员如何…

python学习笔记-内置类型

Python内置类型是Python编程语言中自带的基本数据类型&#xff0c;它们用于存储和处理数据。其中包括数字、序列、映射、类、实例和异常等主要类型。 在这些内置类型中&#xff0c;有一些是可变的&#xff0c;它们具有修改自身内容的能力&#xff0c;比如添加、移除或重排成员…

用快代理换Ip爬取boss直聘招聘信息

import requests import random from prettytable import PrettyTable tb PrettyTable() tb.field_names [区域,详情页链接,领导,经营领域,公司名,招聘人数,学历要求,工作经验要求,职位名称,期望薪资,技能要求,福利]headers {"User-Agent":"Mozilla/5.0 (Win…

跳跃游戏Ⅱ

问题 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - …

独立分体式比例阀控制器

比例阀放大器的主要作用是对比例阀进行控制&#xff0c;它产生所需的电信号&#xff0c;并对这些信号进行综合、比较、校正和放大。这样的设备通常包括稳压电源、颤振信号发生器等&#xff0c;以确保比例阀能够准确地响应控制指令。外置模块式的设计使得这种放大器可以方便地与…

windows系统下安装RabbitMQ

一、RabbitMQ安装软件资源准备 因为RabbitMQ是Erlang语言开发的&#xff0c;因此安装Erlang环境在进行安装RbbitMQ的操作&#xff0c;选择两者版本时一定要参考版本的兼容性 1.RabbitMQ国内下载地址&#xff0c;因官网下载比较缓慢&#xff0c;还是国内的稍微快些 https://r…

Kubernetes IoTDB系列 | IoTDB数据库同步|IoTDB数据库高可用

目录 一、介绍二、应用场景三、IoTDB 数据库搭建四、修改同步配置文件1、配置接收端的参数2、配置发送端的参数五、启动同步功能发送端六、测试一、介绍 IoTDB 数据库同步是指将一个节点的数据复制到其他节点,以确保数据的冗余和可用性。在分布式环境中,数据同步是保证系统高…

【日常聊聊】程序员的金三银四

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 方向一&#xff1a;面试技巧分享 方向二&#xff1a;面试题解析 方向三&#xff1a;公司文化解读 方向四&#xff1a;职业规…

【Vision Pro 应用】Spatialty Coffee:探索咖啡制作的全新维度

Spatialty Coffee,一个引领咖啡文化潮流的应用程序,为用户提供了一个全新的平台,用以浏览和发现最佳的滤过咖啡配方。这款应用不仅满足了咖啡爱好者对于高品质咖啡的追求,同时也为那些希望提升咖啡制作技巧的人提供了有力的支持。 1.广泛支持的滤过咖啡制作器 Spatialty …

Spring篇----第十四篇

系列文章目录 文章目录 系列文章目录前言一、介绍一下 WebApplicationContext二、什么是 spring?三、使用 Spring 框架的好处是什么?四、Spring 由哪些模块组成?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,…

数据结构:链队

一、定义两个结构体 定义两个结构体,一个结构体是结点的结构体&#xff0c;一个结构体是保留指向对头结点和队尾结点指针的结构体 #ifndef __LINK_QUEUE_H__ #define __LINK_QUEUE_H__ #include <stdio.h> #include <stdlib.h>typedef struct link_node{int data…

android studio Unable to download file ‘xxx‘ in offline mode.

如果网络连接正常&#xff0c;但是报这个错&#xff0c;说明开启了离线模式&#xff0c;关掉就行了。 "toggle offline mode" 意思是切换到离线模式 点击右上角的Gradle&#xff0c;然后关闭倒数第二个图标。

利用NSKeyedUnarchiver把数据存储到本地

在开发中&#xff0c;如果使用plist存贮到本地的话&#xff0c;存贮的类型有限&#xff0c;这时候&#xff0c;我们可以就可以考虑利用NSKeyedUnarchiver把数据存储到本地&#xff0c;通过这个方法我们可以将model存贮到本地&#xff0c;一般用来保存用户的账号信息之类的 第一…

超详细的Python字典讲解

一、概念 1.定义 字典是另一种可变容器模型&#xff0c;且可存储任意类型对象。是可变数据类型 字典类型的创建 1.字典的每个键值key>value对用冒号:分隔&#xff0c;每个键值对之间用逗号,分割&#xff0c;整个字典包括在花括号{}中 d {key1:value1,key:value} 2.使…

Redis的发布订阅机制及其使用场景

Redis的发布订阅&#xff08;Pub/Sub&#xff09;机制是一种消息通信模式&#xff0c;其中发送者&#xff08;发布者&#xff09;将消息发送到特定的频道&#xff0c;而订阅者则订阅其中一个或多个频道&#xff0c;以接收感兴趣的消息。这种模式可以用于构建实时通信系统、消息…

【Rust】——函数(所有权)以及借用或引用

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

Postman相关问题及答案(2024)

1、Postman 是什么&#xff1f;它的用途是什么&#xff1f; Postman 是一个流行的 API (应用程序编程接口) 开发辅助工具&#xff0c;它帮助开发者设计、测试、文档化和监控 APIs。Postman 提供了一个友好的用户界面&#xff0c;使得发送网络请求、检查响应和其他与 API 交互的…