OpenHarmony 入门——ArkUI 跨页面数据同步和页面级UI状态存储LocalStorage小结（二）

news2025/3/22 18:37:39

文章大纲

  • 引言
  • 一、在代码逻辑使用LocalStorage
  • 二、从UI内部使用LocalStorage
  • 三、@LocalStorageProp和LocalStorage单向同步
  • 四、@LocalStorageLink和LocalStorage双向同步
  • 五、兄弟组件之间同步状态变量
  • 七、将LocalStorage实例从UIAbility共享到一个或多个视图

引言

前面一篇文章主要介绍了OpenHarmony 入门——ArkUI 管理跨页面和应用级LocalStorage 页面级UI状态存储小结（一）的相关语法和基础理论知识，这篇就好好学习下其用法。

一、在代码逻辑使用LocalStorage

在代码逻辑使用LocalStorage意思是通过相关的API 来建立联系并实现同步。

let para: Record<string,number> = { 'PropA': 47 };
let storage: LocalStorage = new LocalStorage(para); // 创建新实例并使用给定对象初始化
let propA: number | undefined = storage.get('PropA') // propA == 47
let link1: SubscribedAbstractProperty<number> = storage.link('PropA'); // link1.get() == 47
let link2: SubscribedAbstractProperty<number> = storage.link('PropA'); // link2.get() == 47
let prop: SubscribedAbstractProperty<number> = 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添加到LocalParent顶层组件中；
  • @LocalStorageLink绑定LocalStorage对给定的属性，建立双向数据同步
//1、LocalStorage
let obj :Record<string, number> = {'PropA': 66}
// 创建新实例并使用给定对象初始化,LocalStorage接收的是一个Object
let storageObj = new LocalStorage(obj);

@Component
struct LocalChild {
  @LocalStorageLink('PropA') propALinked : number = 88;

  build() {
    Column() {
      // 初始化时读取LocalStorage变量的值66，在按钮点击一次后依然为66不变
      Text(`LocalStorage： ${storageObj.get('PropA')}`).width('100%').height(36)
      //初始化为storage的值，再点击了自己的按钮一次后为
      Text(`LocalStorageLink： ${this.propALinked}`).width('100%').height(36)
      Button(`在LocalChild中读取自己的@LocalStorageLink： ${this.propALinked}`)
        .onClick(() => {
            // 更新@LocalStorageLink变量的值,Text上的值会改变
          this.propALinked += 2;
        }).width('100%').height('36')
    }
  }
}

// ？？？使LocalStorage可从@Component组件访问，好像我传不传过来都不影响结果呀？？？？
@Entry(storageObj)
@Component
struct LocalParent {
  // @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
  @LocalStorageLink('PropA') storLinkP: number = 68;
  build() {
    Column({ space: 15 }) {
      Text(`LocalParent LocalStorage： ${storageObj.get('PropA')}`).width('100%').height(36)
      Button(`LocalParent 中LocalStorageLink： ${this.storLinkP}`).width('100%') // initial value from LocalStorage will be 66, because 'PropA' initialized already
        .onClick(() => this.storLinkP += 3)
      // @Component子组件自动获得对LocalParent LocalStorage实例的访问权限。
      LocalChild()
    }
  }
}

在这里插入图片描述

三、@LocalStorageProp和LocalStorage单向同步

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

  • CompA中对this.storProp1的修改，只会在CompA中生效，并没有同步回storage；
  • Child组件中，Text绑定的storProp2 依旧显示47。
let para: Record<string, number> = { 'PropA': 66 };
let storage: LocalStorage = new LocalStorage(para);
// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct CompP {
  // @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
  @LocalStorageProp('PropA') storageProp1: number = 2;

  build() {
    Column({ space: 15 }) {
      Text(`@LocalStorageProp和LocalStorage单向同步 ${storage.get('PropA')}`).width('100%').height(40).fontStyle(FontStyle.Italic).fontSize(26)
      // 点击后从66开始加2，只改变当前组件显示的storageProp1，不会同步到LocalStorage中，即Child中的storageProp1不会改变
      Button(`CompP 中 LocalStorage ${this.storageProp1}`)
        .onClick(() => {
          this.storageProp1 += 2
        })
      ChildComp()
    }
  }
}

@Component
struct ChildComp {
  // @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
  @LocalStorageProp('PropA') storageProp2: number = 2;

  build() {
    Column({ space: 15 }) {
      // 初始化时显示的依然是66而不是2，当CompP改变时，当前storageProp2也不会改变，显示66
      Text(`ChildComp 中的LocalStorageProp： ${this.storageProp2} && ${storage.get('PropA')}`);
    }
  }
}

在这里插入图片描述

四、@LocalStorageLink和LocalStorage双向同步

@LocalStorageLink装饰的数据和LocalStorage双向同步的场景，还是上面的代码把@LocalStorageLink替换掉@LocalStorageProp就行了。

Text(`@LocalStorageProp和LocalStorage单向同步 ${storage.get('PropA')} && ${this.storageProp1}`).width('100%').height(40).fontStyle(FontStyle.Italic).fontSize(24)

在这里插入图片描述

五、兄弟组件之间同步状态变量

通过@LocalStorageLink双向同步兄弟组件之间的状态。先看Parent自定义组件中发生的变化：

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

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

let ls: Record<string, number> = { 'countStorage': 88 }
let storageBro: LocalStorage = new LocalStorage(ls);

@Component
struct Bro {
  // 子组件实例的名字
  label: string ='';
  // 和LocalStorage中“countStorage”的双向绑定数据
  @LocalStorageLink('countStorage') playCountLink: number = 0;

  build() {
    Row() {
      Text(this.label).width(50).height(40).fontSize(12)
      Text(`Bro playCountLink(+2): ${this.playCountLink} && ${storageBro.get<number>('countStorage')}`)
        .onClick(() => {this.playCountLink += 2 }).width(200).height(40).fontSize(12)
    }.width(300).height(40)
  }
}
//若不传进来的话playCount的值不是用storageBro的来初始化， ${this.playCount}的值就会是99，而不是storage的88
@Entry(storageBro)
@Component
struct ParentBro {
  @LocalStorageLink('countStorage') playCount: number = 99;
  build() {
    Column() {
      Text(`ParentBro playCount(-1): ${this.playCount} && ${storageBro.get<number>('countStorage')} `)
        .onClick(() => {this.playCount -= 1;}).width('100%').height(40).fontSize(12)
      Text(`ParentBro playCount（+3）： ${this.playCount} `)
        .onClick(() => {
          storageBro.set<number | undefined>('countStorage', Number(storageBro.get<number>('countStorage')) + 3);
        }).width('100%').height(40).fontSize(12)
      Bro({ label: 'ChildA' })
      Bro({ label: 'ChildB' })
      Text(`ParentBro ${storageBro.get<number>('countStorage')}`).width('100%').height(40).fontSize(12)
    }
  }
}

在这里插入图片描述

点击另外的按钮效果也是和点击这个ChildA一样，改动的都是联动的

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

LocalStorage的实例仅仅在一个@Entry装饰的组件和其所属的子组件（一个页面）中共享，如果希望其在多个视图中共享，可以在所属UIAbility中创建LocalStorage实例，并调用windowStage.loadContent传入，然后再需要使用时候通过LocalStorage.getShared() 实例来复用可共享了。下面以一个UIAbility中的多个组件共享一个LocalChildStorage来说明：

  • 在所属UIAbility中创建LocalStorage实例，并作为windowStage.loadContent的参数传入
export default class EntryAbility extends UIAbility {

  param:Record<string,number> = {'PropAbility':68};
  storageAbility:LocalStorage = new LocalStorage(this.param);
  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    //把storageAbility传递过去
    windowStage.loadContent('pages/StatePageMgr', this.storageAbility);
  }
  ...
  }

在UI页面通过getShared接口获取通过loadContent共享的LocalStorage实例。LocalStorage.getShared()只在模拟器或者实机上才有效，在Previewer预览器中使用不生效。

  • 在所需要使用这个LocalStorage的组件的Page下通过LocalStorage.getShared()函数来获取实例（而不是自己new去创建哈），然后剩下的就是和传统的自己定义一个LocalStorage实例的使用方法一样了。如LocalPage.ets实现如下
// 在通过getShared接口获取stage共享的LocalStorage实例
let storageFromAbility: LocalStorage = LocalStorage.getShared();

@Entry(storageFromAbility)
@Component
struct FromAbilityComp {
  @LocalStorageLink('PropAbility') propLink: number = 88;
  build() {
    Column() {
      Text(`LocalStorageFromAbility: ${this.propLink} && ${storageFromAbility.get<number>('PropAbility')}`).width('100%').height(36)
      Button('To Page B').width('100%').onClick(() => {
          router.pushUrl({
            url: 'pages/Index'
          })
        })
      }.height('100%')
    }
}

Index.ets

let storageFromAbility2 = LocalStorage.getShared()

@Entry(storageFromAbility2)
@Component
struct IndexComp {
  @LocalStorageLink('PropAbility') propA: number = 66;

  build() {
    Row() {
      Column({space: 10}) {
        Text(`IndexComp this.propA: ${this.propA} && ${storageFromAbility2.get<number>('PropAbility')}`).width('100%').height(36)
          .fontSize(22)
          .fontWeight(FontWeight.Bold)
        Button("IndexComp: Change LocalStorageLink this.propA=100")
          .onClick(() => {
            this.propA = 100;
          }).height(36)
        Button("Back Prev page")
          .onClick(() => {
            router.back()
          })
      }
      .width('100%')
    }
  }
}

在这里插入图片描述

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Python数据可视化实战：从基础图表到高级分析

Python数据可视化实战：从基础图表到高级分析

Python数据可视化实战&#xff1a;从基础图表到高级分析 数据可视化是数据分析的重要环节&#xff0c;通过直观的图表可以快速洞察数据规律。本文将通过5个实际案例&#xff0c;手把手教你使用Python的Matplotlib库完成各类数据可视化任务&#xff0c;涵盖条形图、堆积面积图、…
阅读更多...
在 Elasticsearch 中扩展后期交互模型 - 第 2 部分 - 8.18

在 Elasticsearch 中扩展后期交互模型 - 第 2 部分 - 8.18

作者&#xff1a;来自 Elastic Peter Straer 及 Benjamin Trent 本文探讨了如何优化后期交互向量&#xff0c;以适应大规模生产工作负载&#xff0c;例如减少磁盘空间占用和提高计算效率。 在之前关于 ColPali 的博客中&#xff0c;我们探讨了如何使用 Elasticsearch 创建视觉搜…
阅读更多...
蓝桥每日打卡--区间移位

蓝桥每日打卡--区间移位

#蓝桥#JAVA#区间移位 题目描述 数轴上有n个闭区间&#xff1a;D1,⋯Dn。 其中区间Di用一对整数[ai,bi]来描述&#xff0c;满足 ai≤bi。 已知这些区间的长度之和至少有。 所以&#xff0c;通过适当的移动这些区间&#xff0c;你总可以使得他们的"并"覆盖 [0,],也…
阅读更多...
CUDAOpenCV 基于Hessian矩阵计算特征值

CUDAOpenCV 基于Hessian矩阵计算特征值

文章目录 一、简介二、实现代码三、实现效果一、简介 基于之前的博客：CUDA&OpenCV Hessain矩阵计算，我们可以计算出每个像素的特征值： 二、实现代码 ComputeHessainMatrix.cuh #ifndef HESSAIN_GPU_CUH #
阅读更多...
基于CAMEL 的Workforce 实现多智能体协同工作系统

基于CAMEL 的Workforce 实现多智能体协同工作系统

文章目录 一、workforce 简介1.架构设计2.通信机制 二、workforce 工作流程图示例1.用户角色2.工作流程 三、workforce 中重要函数说明1.__init__函数2.add_single_agent_worker 函数3.add_role_playing_worker 函数4.add_workforce 函数 四、基于workforce实现多智能体协调&am…
阅读更多...
PostgreSQL_数据表结构设计并创建

PostgreSQL_数据表结构设计并创建

目录 前置&#xff1a; 1 数据表设计思路 2 数据表格SQL 3 创建 3.1 创建数据库 db_stock 3.2 在 pgAdmin4 中创建表 前置&#xff1a; 本博文是一个系列。在本人“数据库专栏”-》“PostgreSQL_”开头的博文 1 数据表设计思路 1 日数据来自优矿&#xff0c;优矿的数据…
阅读更多...
如何在MCU工程中启用HardFault硬错误中断

如何在MCU工程中启用HardFault硬错误中断

文章目录 一、HardFault出现场景二、启动HardFault三、C代码示例 一、HardFault出现场景 HardFault&#xff08;硬故障&#xff09; 错误中断是 ARM Cortex-M 系列微控制器中一个较为严重的错误中断&#xff0c;一旦触发&#xff0c;表明系统遇到了无法由其他异常处理机制解决…
阅读更多...
MySQL -- 复合查询

MySQL -- 复合查询

数据库的查询是数据库使用中比较重要的环节&#xff0c;前面的基础查询比较简单&#xff0c;不做介绍&#xff0c;可自行查阅。本文主要介绍复合查询&#xff0c;并结合用例进行讲解。 本文的用例依据Soctt模式的经典测试表&#xff0c;可以自行下载&#xff0c;也可以自己创建…
阅读更多...
卷积神经网络 - 卷积层（具体例子）

卷积神经网络 - 卷积层（具体例子）

为了更一步学习卷积神经网络之卷积层&#xff0c;本文我们来通过几个个例子来加深理解。 一、灰度图像和彩色图像的关于特征映射的例子 下面我们通过2个例子来形象说明卷积层中“特征映射”的概念&#xff0c;一个针对灰度图像&#xff0c;一个针对彩色图像。 例子 1&#x…
阅读更多...
测试Claude3.7 sonnet画蛋白质

测试Claude3.7 sonnet画蛋白质

测试Claude3.7 sonnet画蛋白虽然画的很粗糙&#xff0c;但是大致画了出来
阅读更多...
java项目之基于ssm的游戏攻略网站（源码+文档）

java项目之基于ssm的游戏攻略网站（源码+文档）

项目简介 游戏攻略网站实现了以下功能&#xff1a; 管理员主要负责填充图书和其类别信息&#xff0c;并对已填充的数据进行维护&#xff0c;包括修改与删除&#xff0c;管理员也需要审核老师注册信息&#xff0c;发布公告信息&#xff0c;管理自助租房信息等。 &#x1f495;…
阅读更多...
本地基于Ollama部署的DeepSeek详细接口文档说明

本地基于Ollama部署的DeepSeek详细接口文档说明

前文&#xff0c;我们已经在本地基于Ollama部署好了DeepSeek大模型&#xff0c;并且已经告知过如何查看本地的API。为了避免网络安全问题&#xff0c;我们希望已经在本地调优的模型&#xff0c;能够嵌入到在本地的其他应用程序中&#xff0c;发挥本地DeepSeek的作用。因此需要知…
阅读更多...
python NameError报错之导库报错

python NameError报错之导库报错

在日常代码编写中&#xff0c;经常出现如 图1 一样的报错&#xff0c;在代码多时很难找到问题&#xff0c;但翻看代码后就会发现是因为未导库&#xff0c; 图1 报错 代码: time.sleep(0.1) print("time库") 解决方法: 第一步:在代码中添加导库代码 import time #…
阅读更多...
Web3网络生态中数据保护合规性分析

Web3网络生态中数据保护合规性分析

Web3网络生态中数据保护合规性分析 在这个信息爆炸的时代&#xff0c;Web3网络生态以其独特的去中心化特性&#xff0c;逐渐成为数据交互和价值转移的新平台。Web3&#xff0c;也被称为去中心化互联网&#xff0c;其核心理念是将数据的控制权归还给用户&#xff0c;实现数据的…
阅读更多...
C++ 语法之数组指针

C++ 语法之数组指针

一维数组&#xff1a; 如果我们定义了一个一维数组&#xff0c;那么这个数组名&#xff0c;就是指向第一个数组元素的地址&#xff0c;也即&#xff0c;是整个数组分配的内存空间的首地址。 比如 int a[3]; 定义了一个包含三个元素的数组。因为一个int占4个字节&#xff0c;那…
阅读更多...
PLY格式文件如何转换成3DTiles格式——使用GISBox软件实现高效转换

PLY格式文件如何转换成3DTiles格式——使用GISBox软件实现高效转换

一、概述 在三维GIS和数字孪生领域&#xff0c;3DTiles格式已成为主流的数据格式之一。它由Cesium团队提出&#xff0c;专为大规模3D数据可视化设计&#xff0c;能够高效地加载和展示海量模型数据。而PLY格式则是一种常见的三维模型文件格式&#xff0c;主要用于存储点云数据或…
阅读更多...
Java定时任务的三重境界：从单机心跳到分布式协调

Java定时任务的三重境界：从单机心跳到分布式协调

《Java定时任务的三重境界&#xff1a;从单机心跳到分布式协调》 本文将以生产级代码标准&#xff0c;揭秘Java定时任务从基础API到分布式调度的6种实现范式&#xff0c;深入剖析ScheduledThreadPoolExecutor与Quartz Scheduler的线程模型差异&#xff0c;并给出各方案的性能压…
阅读更多...
【Linux网络】手动部署并测试内网穿透

【Linux网络】手动部署并测试内网穿透

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;博客仓库&#xff1a;https://gitee.com/JohnKingW/linux_test/tree/master/lesson &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &…
阅读更多...
java项目之在线购物系统（源码+文档）

java项目之在线购物系统（源码+文档）

项目简介 在线购物系统实现了以下功能&#xff1a; 使用在线购物系统的用户分管理员和用户两个角色的权限子模块。 管理员所能使用的功能主要有&#xff1a;主页、个人中心、用户管理、商品分类管理、商品信息管理、系统管理、订单管理等。 用户可以实现主页、个人中心、我的…
阅读更多...
OO_Unit1

OO_Unit1

第一次作业 UML类图 代码复杂度分析 其中Expr中的toString方法认知复杂度比较高&#xff0c;主要源于多层条件嵌套和分散的字符串处理逻辑&#xff0c;重构时可重点关注这两部分的解耦。 代码量分析 1.”通用形式“ 我觉得我的设计的最大特点就是“通用形式”&#xff0c;具…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023