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

news/2024/4/21 13:23:05/文章来源:https://blog.csdn.net/weixin_71403100/article/details/136455936

一、介绍

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

  • 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.luyixian.cn/news_show_999266.aspx

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

相关文章

Spring Boot中Excel数据导入导出的高效实现

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

Rust 开发的高性能 Python 包管理工具,可替换 pip、pip-tools 和 virtualenv

最近&#xff0c;我在 Python 潮流周刊 中分享了一个超级火爆的项目&#xff0c;这还不到一个月&#xff0c;它在 Github 上已经拿下了 8K star 的亮眼成绩&#xff0c;可见其受欢迎程度极高&#xff01;国内还未见有更多消息&#xff0c;我趁着周末把一篇官方博客翻译出来了&a…

如何转行成为产品经理?

转行NPDP也是很合适的一条发展路径&#xff0c;之后从事新产品开发相关工作~ 一、什么是NPDP&#xff1f; NPDP 是产品经理国际资格认证&#xff0c;美国产品开发与管理协会&#xff08;PDMA&#xff09;发起的&#xff0c;是目前国际公认的唯一的新产品开发专业认证&#xff…

grafana table合并查询

注&#xff1a;本文基于Grafana v9.2.8编写 1 问题 默认情况下table展示的是一个查询返回的多个field&#xff0c;但是我想要的数据在不同的metric上&#xff0c;比如我需要显示某个pod的读写IO&#xff0c;但是读和写这两个指标存在于两个不同的metirc&#xff0c;需要分别查…

flink重温笔记(十二): flink 高级特性和新特性(1)——End-to-End Exactly-Once(端到端精确一致性语义)

Flink学习笔记 前言&#xff1a;今天是学习 flink 的第 12 天啦&#xff01;学习了 flink 高级特性和新特性之 End-to-End Exactly-Once&#xff08;端到端精确一致性语义&#xff09;&#xff0c;主要是解决大数据领域数据从数据源到数据落点的一致性&#xff0c;不会容易造成…

新手小白剪辑视频知识点:视频分辨率和位深度,有什么区别?

新手小白需要了解的视频剪辑知识点&#xff0c;什么是视频分辨率尺寸(文件大小)和位深度&#xff1f; 分辨率尺寸/文件大小 常见的视频分辨率是高清和 4K。高清素材的屏幕像素&#xff08;宽度 x 高度&#xff09;测量值通常为 1920 x 1080&#xff0c;而 4K 素材是其四倍&am…

php方便直接修改数据库的字段(挺方便的)

1.界面效果 2.代码 <?phpecho <form action"" method"post"><label for"table">表名:</label><input type"text" id"table" name"table"><br><div id"fieldsContaine…

Java项目:基于SSM框架实现的二手车交易平台【源码+开题报告+任务书+毕业论文+答辩ppt】

一、项目简介 本项目是一套基于SSM框架实现的二手车交易平台 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、功能齐…

Python之Web开发中级教程----搭建Git环境

Python之Web开发中级教程----搭建Git环境一 Git 是目前世界上最先进的分布式版本控制系统 作用&#xff1a;代码管理。方便多人协同开发&#xff1b;方便版本控制。 安装git 单人本地仓库 建立本地仓库目录 配置个人管理信息 git config –global user.email 32356105163.com…

华为北向网管NCE开发教程(1)闭坑选接口协议

华为北向网管NCE开发教程&#xff08;1&#xff09;闭坑选接口协议 华为北向网管NCE开发教程&#xff08;2&#xff09;REST接口开发 华为北向网管NCE开发教程&#xff08;3&#xff09;CORBA协议开发 本文一是记录自己开发华为北向网管遇到的坑&#xff0c;二是给需要的人&…

【php】【mysql】 原生初级简易新闻发布系统成品代码动态网站开发网页WEB浏览器端B/S结构

【php】【mysql】 原生初级简易新闻发布系统成品代码动态网站开发网页WEB浏览器端B/S结构 一级目录二级目录三级目录 获取源码方式项目说明&#xff1a;项目运行环境文件包含运行截图程序代码结构图新闻首页图新闻详情图新闻列表管理图个人信息管理图登录界面新闻详情新闻发布 …

@EnableWebMvc介绍和使用详细demo

EnableWebMvc是什么 EnableWebMvc 是 Spring MVC 中的一个注解&#xff0c;它用于启用 Spring MVC 框架的基本功能&#xff0c;以便你可以使用 Spring MVC 提供的特性来处理 Web 请求。 通常情况下&#xff0c;在基于 Spring Boot 的应用中&#xff0c;并不需要显式地使用 Ena…

漏洞挖掘 | 公益SRC上榜技巧

目录 1、寻找漏洞 2、挖掘漏洞 3、提交报告 4、上榜吉时 5、快速上分 6、小技巧&#xff1a;冲榜拿分制胜点-拉开人与人之间的差距 1、寻找漏洞 寻找漏洞的2种办法&#xff1a; 1)谷歌语法 注意&#xff1a;用谷歌语法找站的时候&#xff0c;要加点中文&#xff0c;不然搜…

从数据处理到3D PDF生成:交互式3D PDF生成引擎HOOPS Publish的工作原理

在当今数字化时代&#xff0c;3D技术在各个行业中扮演着重要角色&#xff0c;从制造业到医疗保健&#xff0c;再到建筑设计。为了更好地共享、演示和交互展示3D模型数据&#xff0c;HOOPS Publish作为一款强大的3D引擎&#xff0c;专门用于生成交互式的3D PDF文件。本文将深入探…

【一】【设计模式】类关系UML图

1. 继承&#xff08;Generalization&#xff09; 继承是对象间的一种层次关系&#xff0c;允许子类继承并扩展父类的功能。 UML线&#xff1a;带有空心箭头的直线&#xff0c;箭头指向基类&#xff08;父类&#xff09;。 class Parent {public void parentMethod() {System.…

技术选型思考:分库分表和分布式DB(TiDB/OceanBase) 的权衡与抉择

在当今数据爆炸的时代&#xff0c;数据库作为存储和管理数据的核心组件&#xff0c;其性能和扩展性成为了企业关注的重点。随着业务的发展和数据量的不断增长&#xff0c;传统的单库单表架构逐渐暴露出性能瓶颈和扩展性限制。为了应对这些挑战&#xff0c;企业常常需要在分库分…

图机器学习(3)-面向节点的人工特征工程

0 问题引入 地铁导航图 计算机是看不懂这些图&#xff0c;计算机只能看懂向量、矩阵。 传统图机器学习只讨论连接特征。 构造一个新的特征 x 1 x 2 x_1x_2 x1​x2​&#xff0c;有利于分开这种数据。 人需要去翻译这些计算机不懂的特征&#xff0c;变成计算机可以懂…

SQL注入攻击 - update注入

环境准备&#xff1a;构建完善的安全渗透测试环境&#xff1a;推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、MySQL UPDATE语句复习&#xff1a; UPDATE语句用于修改表中的数据&#xff0c;基本形式为&#xff1a;UPDATE 表名称 SET 列名称新值 WHERE 更新条件;语…

ShardingSphere-SQL 解析 Issue 处理流程

ShardingSphere-SQL 解析 Issue 处理流程 这是之前给社区写的 SQL 解析 Issue 的处理流程&#xff0c;可以帮助社区用户快速参与到 ShardingSphere-SQL 解析任务当中。 ShardingSphere SQL 解析 issue 列表 Issue 背景说明 当前 Issue 使用自定义的爬虫脚本从对应的数据库官…

代理模式以及静态代理、JDK代理、Cglib代理的实现

代理模式&#xff08;Proxy&#xff09; 介绍 1、代理模式&#xff1a;为对象提供一个替身&#xff0c;以控制对这个对象的访问&#xff0c;即通过代理对象访问目标对象&#xff0c;这样做的好处是&#xff1a;可以在目标对象实现的基础上&#xff0c;增强额外的功能操作 &…