关于harmonyos:HarmonyOSLocalStorage页面级UI状态存储

78次阅读

共计 9162 个字符，预计需要花费 23 分钟才能阅读完成。

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，并笼罩掉本地的批改。

装璜器应用规定阐明

变量的传递 / 拜访规定阐明

图 1 @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 创立的双向绑定变量）变量。

装璜器应用规定阐明

变量的传递 / 拜访规定阐明

图 2 @LocalStorageLink 初始化规定图示

察看变动和行为表现

察看变动

  • 当装璜的数据类型为 boolean、string、number 类型时，能够察看到数值的变动。
  • 当装璜的数据类型为 class 或者 Object 时，能够察看到赋值和属性赋值的变动，即 Object.keys(observedObject)返回的所有属性。
  • 当装璜的对象是 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 实例中存储的状态变量。

本示例以 @LocalStorage 为例，展现了：

  • 应用构造函数创立 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 不会扭转，显示 47
      Text(`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<number>(‘countStorage’)}”没有同步刷新，因为 storage.get<number>(‘countStorage’)返回的是惯例变量，惯例变量的更新并不会引起 Text 组件的从新渲染。

Child 自定义组件中的变动：

1.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';
let para:Record<string,number> = {'PropA': 47};
let localStorage: LocalStorage = new LocalStorage(para);
export default class EntryAbility extends UIAbility {
  storage: LocalStorage = localStorage
  onWindowStageCreate(windowStage: window.WindowStage) {windowStage.loadContent('pages/Index', this.storage);
  }
}

阐明
在 UI 页面通过 getShared 接口获取在通过 loadContent 共享的 LocalStorage 实例。
LocalStorage.getShared 只在模拟器或者实机上才无效，不能在 Preview 预览器中应用。

// 通过 GetShared 接口获取 stage 共享的 LocalStorage 实例
let storage = LocalStorage.GetShared()
@Entry(storage)
@Component
struct CompA {
  // can access LocalStorage instance using 
  // @LocalStorageLink/Prop decorated variables
  @LocalStorageLink('PropA') varA: number = 1;
  build() {Column() {Text(`${this.varA}`).fontSize(50)
    }
  }
}

阐明
对于开发者更倡议应用这个形式来构建 LocalStorage 的实例，并且在创立 LocalStorage 实例的时候就写入默认值，因为默认值能够作为运行异样的备份，也能够用作页面的单元测试。

为了可能让大家跟上互联网时代的技术迭代，在这里跟大家分享一下我本人近期学习心得以及参考网上材料整顿出的一份最新版的鸿蒙学习晋升材料 ，有须要的小伙伴自行支付， 限时开源，先到先得~~~~

支付以下高清学习路线原图请点击→《鸿蒙全套学习指南》纯血鸿蒙 HarmonyOS 根底技能学习路线图

支付以上残缺高清学习路线图，请点击→《鸿蒙 (Harmony OS)开发学习手册》小编本人整顿的局部学习材料（蕴含有高清视频、开发文档、电子书籍等）

以上分享的学习路线都适宜哪些人跟着学习？
- 应届生 / 计算机专业通过学习鸿蒙新兴技术，入行互联网，将来高起点待业。
- 0 根底转行提前布局新方向，抓住风口，自我晋升，取得更多就业机会。
- 技术晋升 / 进阶跳槽倒退瓶颈期，晋升职场竞争力，疾速把握鸿蒙技术，享受蓝海红利。

最初

鸿蒙开发学习是一个系统化的过程，从基础知识的学习到实战技能的锻炼 ，再到对前沿技术的摸索，每一环节都至关重要。 心愿这份教程材料能帮忙您疾速入门并在鸿蒙开发之路上步步攀升，成就一番事业。让咱们一起乘风破浪，拥抱鸿蒙生态的广大将来！

如果你感觉这篇内容对你有帮忙，我想麻烦大家动动小手给我：点赞，转发，有你们的『点赞和评论』，才是我发明的能源。

关注我，同时能够期待后续文章 ing，不定期分享原创常识。

想要获取更多残缺鸿蒙最新 VIP 学习材料，请点击→《鸿蒙根底入门学习指南》

正文完
harmonyos
发表至： harmonyos
2024-02-21
 0
关于harmonyos:HarmonyOS-40-实况窗上线支付宝实现医疗场景智能提醒
关于harmonyos:创建你的Hello-Harmony
关于harmonyos:手把手教你使用HarmonyOS本地模拟器
关于harmonyos:HarmonyOSHarmonyOS智能硬件开发学习指南-HDC2020