【鸿蒙 HarmonyOS 4.0】应用状态:LocalStorage/AppStorage/PersistentStorage

一、介绍

如果要实现应用级的,或者多个页面的状态数据共享,就需要用到应用级别的状态管理的概念。

  • LocalStorage:页面级UI状态存储,通常用于UIAbility内、页面间的状态共享。
  • AppStorage:特殊的单例LocalStorage对象,由UI框架在应用程序启动时创建,为应用程序UI状态属性提供中央存储;
  • PersistentStorage:持久化存储UI状态,通常和AppStorage配合使用,选择AppStorage存储的数据写入磁盘,以确保这些属性在应用程序重新启动时的值与应用程序关闭时的值相同;

二、LocalStorage:页面级UI状态存储

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

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

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

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

2.1、从应用逻辑使用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() = 47link1.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

2.2、从UI内部使用LocalStorage

2.2.1、使用步骤:

①使用构造函数创建LocalStorage实例storage;

②使用@Entry装饰器将storage添加到LocalStoragePage顶层组件中;

③建立数据同步

@LocalStorageLink绑定LocalStorage对给定的属性,建立双向数据同步。

@LocalStorageProp绑定LocalStorage对给定的属性,建立单向数据同步

2.2.2、@LocalStorageProp和LocalStorage建立单向同步的场景

// 创建新实例并使用给定对象初始化
let storage = new LocalStorage({ name:'Tom' });
// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct LocalStoragePage {// @LocalStorageProp变量装饰器与LocalStorage中的'name'属性建立单向绑定@LocalStorageProp('name') myName:string = ''build() {Row() {Column() {Text(this.myName).fontSize(50).fontWeight(FontWeight.Bold)//点击按钮后,只改变当前组件显示的myName,不会同步到LocalStorage中Button('更改名字').onClick(()=>{this.myName = 'jack'})//子组件ChildChild()}.width('100%')}.height('100%')}
}@Component
struct Child {// @LocalStorageProp变量装饰器与LocalStorage中的'name'属性建立单向绑定@LocalStorageProp('name') myName:string = ''build() {Row(){//当父组件改变时,子组件不会改变,myName显示 'Tom'Text(`Child-${this.myName}`).fontSize(30)}}
}

说明:

在上面的示例中, LocalStoragePage组件和Child组件分别在本地创建了与storage的'name'对应属性的单向同步的数据,可以看到:

  • LocalStoragePage中对this.myName的修改,只会在LocalStoragePage中生效,并没有同步回storage;
  • Child组件中,Text绑定的myName 依旧显示 'Tom'。

2.2.3、@LocalStorageLink和LocalStorage双向同步的场景

// 创建新实例并使用给定对象初始化
let storage = new LocalStorage({ name:'Tom' });
// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct LocalStoragePage {// @LocalStorageLink变量装饰器与LocalStorage中的'name'属性建立双向绑定@LocalStorageLink('name') myName:string = ''build() {Row() {Column() {Text(this.myName).fontSize(50).fontWeight(FontWeight.Bold)//点击按钮后,当前组件显示的myName,会同步到LocalStorage中Button('更改名字').onClick(()=>{this.myName = 'jack'})//子组件ChildChild()}.width('100%')}.height('100%')}
}@Component
struct Child {// @LocalStorageLink变量装饰器与LocalStorage中的'name'属性建立双向绑定@LocalStorageLink('name') myName:string = ''build() {Row(){//当父组件改变时,子组件也会改变,myName显示 'jack'Text(`Child-${this.myName}`).fontSize(30)}}
}

说明:

在上面的示例中, LocalStoragePage组件和Child组件分别在本地创建了与storage的'name'对应属性的双向同步的数据,可以看到:

  • LocalStoragePage中对this.myName的修改,会同步到storage中
  • 父组件发生变化后,Child组件中,Text绑定的myName 也会改变为 'jack'。

拓展:

数据双向同步时,在父组件点击按钮通过this.myName进行名字的修改,还有一种写法是直接通过storage的set方法来改变name的值,如下写法:

点击按钮后,storage中的name值由'Tom'更改为'rose',父子组件中都发生了改变

        //点击按钮后,当前组件显示的myName,会同步到LocalStorage中Button('更改名字').onClick(()=>{// this.myName = 'jack'storage.set('name','rose')})

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

2.3.1、使用步骤

①​ 在所属UIAbility中创建LocalStorage实例,并调用windowStage.loadContent。

②创建2个UI页面,在UI页面通过GetShared接口获取在通过loadContent共享的LocalStorage实例

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

// Comp1.etsimport router from '@ohos.router'
// 通过getShared接口获取stage共享的LocalStorage实例
let storage = LocalStorage.GetShared()
@Entry(storage)
@Component
struct Comp1 {@LocalStorageLink('cityName') cityName:string = ''build() {Row() {Column() {Text('Comp1'+'-'+this.cityName).fontSize(30).fontWeight(FontWeight.Bold)Button('去Comp1').onClick(()=>{router.pushUrl({url:'pages/Comp2'})})}.width('100%')}.height('100%')}
}
// Comp2.etsimport router from '@ohos.router'
// 通过getShared接口获取stage共享的LocalStorage实例
let storage = LocalStorage.GetShared()
@Entry(storage)
@Component
struct Comp2 {@State message:string = 'Comp2'@LocalStorageLink('cityName') cityName:string = ''build() {Row() {Column() {Text(this.message).fontSize(30).fontWeight(FontWeight.Bold)Button('返回Comp1').onClick(()=>{this.cityName = '深圳'router.back()})}.width('100%')}.height('100%')}
}

说明:

以上分别为Comp1页面与Comp2页面

Comp1页面通过getShared接口获取stage共享的LocalStorage实例,使用Text展示cityName初始值为'北京',并跳转至Comp2页面

Comp2页面也通过getShared接口获取stage共享的LocalStorage实例,在返回Comp1页面前,先将cityName值更改为'深圳',所以返回到Comp1页面时,呈现的cityName值已更改为'深圳'了

三、AppStorage:应用全局的UI状态存储 

AppStorage是应用全局的UI状态存储,是和应用的进程绑定的,由UI框架在应用程序启动时创建,为应用程序UI状态属性提供中央存储。

AppStorage是在应用启动的时候会被创建的单例。它的目的是为了提供应用状态数据的中心存储,这些状态数据在应用级别都是可访问的。AppStorage将在应用运行过程保留其属性。属性通过唯一的键字符串值访问。

✍@StorageProp(key)是和AppStorage中key对应的属性建立单向数据同步

✍@StorageLink(key)是和AppStorage中key对应的属性建立双向数据同步

3.1、从应用逻辑使用AppStorage

AppStorage.SetOrCreate('PropA', 47);let propA: number = AppStorage.Get('PropA') // propA in AppStorage == 47, propA in LocalStorage == 17
var link1: SubscribedAbstractProperty<number> = AppStorage.Link('PropA'); // link1.get() == 47
var link2: SubscribedAbstractProperty<number> = AppStorage.Link('PropA'); // link2.get() == 47
var prop: SubscribedAbstractProperty<number> = AppStorage.Prop('PropA'); // prop.get() == 47link1.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() == 49AppStorage.Get('PropA') // == 49
link1.get() // == 49
link2.get() // == 49
prop.get() // == 49

3.2、从UI内部使用AppStorage

@StorageLink变量装饰器与AppStorage配合使用,此装饰器使用AppStorage中的属性创建双向数据同步。


AppStorage.SetOrCreate('money', 50);@Entry
@Component
struct AppStoragePage {@StorageLink('money') storLink: number = 1;build() {Row() {Column() {Text(`AppStorage ${this.storLink}`).fontSize(30).onClick(() => this.storLink += 1)}.width('100%')}.height('100%')}
}

四、PersistentStorage:持久化存储UI状态

LocalStorage和AppStorage都是运行时的内存,但是在应用退出再次启动后,依然能保存选定的结果,那便需要用到PersistentStorage

PersistentStorage是应用程序中的可选单例对象。此对象的作用是持久化存储选定的AppStorage属性,以确保这些属性在应用程序重新启动时的值与应用程序关闭时的值相同。

PersistentStorage允许的类型和值有:

  • number, string, boolean, enum 等简单类型。
  • 可以被JSON.stringify()和JSON.parse()重构的对象。例如Date, Map, Set等内置类型则不支持,以及对象的属性方法不支持持久化。

注意:

①PersistentStorage的持久化变量最好是小于2kb的数据,不要大量的数据持久化,因为PersistentStorage写入磁盘的操作是同步的,大量的数据本地化读写会同步在UI线程中执行,影响UI渲染性能。如果开发者需要存储大量的数据,建议使用数据库api。

②PersistentStorage只能在UI页面内使用,否则将无法持久化数据。

示例:

PersistentStorage.PersistProp('highScore', '0');

4.1、使用场景

从AppStorage中访问PersistentStorage初始化的属性

1、初始化PersistentStorage:

PersistentStorage.PersistProp('money', 50);

 2、在AppStorage获取对应属性:

AppStorage.Get('money'); // returns 50

 或在组件内部定义:

@StorageLink('money') money:number = 10;

完整代码如下:

PersistentStorage.PersistProp('money',50)@Entry
@Component
struct PersistentStoragePage {@State message: string = 'Hello PersistentStoragePage'@StorageLink('money') money:number = 10build() {Row() {Column({space:10}) {Text(this.message).fontSize(30)// 应用退出时会保存当前结果。重新启动后,会显示上一次的保存结果Text(`money:${this.money}`).fontSize(30).fontWeight(FontWeight.Bold).onClick(()=>{this.money += 1})}.width('100%')}.height('100%')}
}

说明:

点击money所增加的数字,应用退出时会保存当前结果。重新启动页面,会显示上一次的保存结果

当前持久化存储在API9模拟器上暂不支持。

4.2、PersistentStorage与AppStorage访问顺序

正确顺序为:AppStorage需在 PersistentStorage之后访问

需要先判断是否需要覆盖上一次保存在PersistentStorage中的值,如果需要覆盖,再调用AppStorage的接口进行修改,如果不需要覆盖,则不调用AppStorage的接口。

PersistentStorage.PersistProp('aProp', 48);
if (AppStorage.Get('aProp') > 50) {// 如果PersistentStorage存储的值超过50,设置为47AppStorage.SetOrCreate('aProp',47);
}

最后:👏👏😊😊😊👍👍 

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

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

相关文章

数据库系统概念(第一周)

⚽前言 &#x1f3d0;四个基本概念 一、数据 定义 种类 特点 二、数据库 三、数据库管理系统&#xff08;DBMS&#xff09; 四、 数据库系统&#xff08;DBS&#xff09; &#x1f3c0;数据库系统和文件系统对比 文件系统的弊端 &#x1f94e;数据视图 数据抽象 …

java 环境配置(保姆级最新版)

&#x1f600;前言 ps 因为网络上教程太多太杂所以干脆直接自己出个教程方便自己复习也希望帮助到大家 文章目录 第一查看自己电脑的系统类型第二 jdk下载历史jdk下载 第三 jdk安装第四 环境搭配Java_Home 配置Path 配置CLASSPATH 配置 检测是否配置成功 第一查看自己电脑的系统…

机器学习流程—数据预处理 清洗

机器学习流程—数据预处理 清洗 数据清洗因为它涉及识别和删除任何丢失、重复或不相关的数据。数据清理的目标是确保数据准确、一致且无错误,因为不正确或不一致的数据会对 ML 模型的性能产生负面影响。专业数据科学家通常会在这一步投入大量时间,因为他们相信Better data b…

Dynamo3.0.3——六年来最大的更新

Hello大家好&#xff01;我是九哥~ 前几天&#xff0c;Dynamo Core 3.0.0版本发布&#xff0c;迎来了Dynamo六年来最大的一次更新。最大的改变&#xff0c;是更新到了.net8&#xff0c;这回对Dynamo节点包产生不小影响。接下来我们详细看一下都有哪些变化。 首先&#xff0…

Charles的安装及配置

1 Charles激活 激活网址:https://tools.zzzmode.com/mytools/charles/ 得到的激活码后打开Charles,选择help里的registered 进行登录 2 进行ssl代理设置(用来抓取https的请求) 3 输入ssl代理的host和port 4 安装本机证书(选择完成后点击下一步或确定就行) 手机相关配置(保持手…

瑞_23种设计模式_模板方法模式

文章目录 1 模板方法模式&#xff08;Template Pattern&#xff09; ★ 钩子函数1.1 介绍1.2 概述1.3 模板方法模式的结构1.4 模板方法模式的优缺点1.5 模板方法模式的使用场景 2 案例一2.1 需求2.2 代码实现 3 案例二3.1 需求3.2 代码实现 4 JDK源码解析&#xff08;InputStre…

[BUUCTF]-PWN:starctf_2019_babyshell解析(汇编\x00开头绕过+shellcode)

查看保护 查看ida 这里就是要输入shellcode&#xff0c;但是函数会有检测。 在shellcode前面构造一个以\x00机器码开头的汇编指令&#xff0c;这样就可以绕过函数检查了。 完整exp&#xff1a; from pwn import* context(log_leveldebug,archamd64) pprocess(./babyshell)she…

【C++】C语言为什么不能函数重载?

文章目录 1.概念2. C为什么支持函数重载&#xff1f; 1.概念 C允许功能类似的同名函数出现&#xff0c;只要形参列表中的参数个数、类型、类型顺序不同&#xff0c;满足这三个条件中任意一个则构成函数重载&#xff0c;函数重载常用来处理实现功能类似数据类型不同的问题。 /…

【Docker4】使用Harbor搭建私有仓库

Docker私有仓库一、搭建本地私有仓库1、daemon.json 配置文件中常用配置项2、搭建私有仓库3、Docker容器重启策略 二、Docker--harbor私有仓库部署与管理1、Harbor 简介2、Harbor的特性3、Harbor的构成4、Harbor 部署4.1、部署 Docker-Compose 服务4.2、部署 Harbor 服务4.3、启…

解决文件过大无法存入U盘

如果文件达到4GB以上大小,且还是比U盘容量小,却放不进去。 这是由于格式问题。 U盘默认格式是FAT32,存放的单个文件大小不能超过4GB 可以修改U盘格式为exFAT或者NTFS格式。这样不会收到限制 下面以Windows11系统进行演示: 1.连接U盘 2.按WINe打开文件管理器 3.点击"文件…

雷卯的ESD管SDA3311DN可以替代AZ5883-01F ---国产化替代篇

已经有很多客户选用雷卯的 SDA3311DN替代Amazing的 AZ5883-01F&#xff0c;客户可以获得更好的价格和更快的交期。 SDA3311DN主要应用于对3.3V供电的静电浪涌防护等&#xff0c;特别是在一些受空间所限的小电子设备很受青睐。 雷卯的SDA3311DN优势&#xff1a; IPP大(65A) &…

快速瓦斯封孔器请满载希望出发

不论昨天如何&#xff0c;今天请满载希望出发&#xff01;每一个微笑、每一次服务&#xff0c;都是我们通往成功巅峰的阶梯。 一、 用途&#xff1a; CKF&#xff0d;I型快速瓦斯封孔器用以快速封闭采面卸压抽放钻孔&#xff0c;具有重量轻、速度快、操作简便的特点&#xff1…

模拟框图的表示

微分方程的建立 目的&#xff1a;为建立LTI系统的数学模型&#xff0c;需要列写微分方程式。 以RLC电路为例&#xff1a; 以Us为输入&#xff0c;Uc为输入&#xff0c;则可以得出以下微分方程式&#xff1a; 抽去物理意义后&#xff0c;得到一般的常微分线性方程&#xff1a;…

重塑语言智能未来:掌握Transformer,驱动AI与NLP创新实战

Transformer模型 Transformer是自然语言理解(Natural Language Understanding&#xff0c;NLU)的游戏规则改变者&#xff0c;NLU 是自然语言处理(Natural Language Processing&#xff0c;NLP)的一个子集。NLU已成为全球数字经济中AI 的支柱之一。 Transformer 模型标志着AI 新…

怎么给电脑换个ip地址?电脑换ip方法

在数字化时代&#xff0c;IP地址已成为我们在线身份的一部分。然而&#xff0c;出于网络安全、隐私保护或访问特定内容的需求&#xff0c;我们有时需要更改电脑的IP地址。这篇文章将为您提供简单易懂的步骤&#xff0c;教您如何为电脑更换IP地址&#xff0c;并分享一些实用建议…

ThreadLocal 内存泄漏问题

ThreadLocal 用于存储线程本地的变量&#xff0c;如果创建了一个 ThtreadLocal 变量&#xff0c;在多线程访问这个变量的时候&#xff0c;每个线程都会在自己线程的本地内存中创建一份变量的副本&#xff0c;从而起到线程隔离的作用。 Thread、ThreadLocal、ThreadLocalMap 之…

深度学习与机器学习:互补共进,共绘人工智能宏伟蓝图

在人工智能的广阔天地中&#xff0c;深度学习与机器学习如同两支强大的队伍&#xff0c;各自闪耀着独特的光芒&#xff0c;却又携手共进&#xff0c;共同书写着智能的辉煌篇章。尽管深度学习是机器学习的一个分支&#xff0c;但它们在模型构建、特征提取以及应用场景等多个方面…

Kafka | SpringBoot集成Kafka

SpringBoot集成Kafka 一、前言二、项目1. pom2. application.properties4. 消息生产者-测试5. 消息消费者 三、启动测试四、有总结的不对的地方/或者问题 请指正, 我在努力中 一、前言 该文章中主要对SpringBoot 集成Kafka 主要是 application.properties 与 pom坐标就算集成完…

【PHP+代码审计】PHP基础——浮点型和布尔型

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…

Kotlin dist downloading failed

现象&#xff1a; 在使用AndroidStudio编写Flutter项目时总是在工具的右下角提示错误信息 该问题通常在刚刚打开AndroidStudio时报出&#xff0c;但可以正常编译和运行flutter项目即Android项目 分析&#xff1a;Flutter项目组认为这是AndroidStudio工具平台本身的问题非Flut…