HarmonyOS 鸿蒙Next中@LocalStorageProp 和 @LocalStorageLink

HarmonyOS 鸿蒙Next中@LocalStorageProp 和 @LocalStorageLink @LocalStorageProp 和 @LocalStorageLink 与 @StorageProp 和 @StorageLink 有什么区别？LocalStorage 的作用域是什么？如何在页面间共享 LocalStorage？适用于什么场景？（问题来源项目案例整理:https://github.com/heqiyuan35-creator/HydroQuiz.git）


更多关于HarmonyOS 鸿蒙Next中@LocalStorageProp 和 @LocalStorageLink的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

LocalStorage 是页面级别的状态存储，与 AppStorage（应用级别）不同。

LocalStorage 创建与共享：

// 创建 LocalStorage 实例
const localStorage: LocalStorage = new LocalStorage();
localStorage.setOrCreate('pageTitle', '知识库');
localStorage.setOrCreate('selectedId', '');

// 在 @Entry 页面中使用
@Entry(localStorage)
@Component
struct KnowledgePage {
  // 双向绑定
  @LocalStorageLink('pageTitle') pageTitle: string = '';
  // 单向绑定
  @LocalStorageProp('selectedId') selectedId: string = '';

  build() {
    Column() {
      Text(this.pageTitle)

      // 子组件自动共享同一个 LocalStorage
      ChildComponent()
    }
  }
}

@Component
struct ChildComponent {
  // 子组件也可以访问
  @LocalStorageLink('pageTitle') title: string = '';

  build() {
    Text(this.title)
      .onClick(() => {
        this.title = '新标题';  // 会同步到父组件
      })
  }
}

与 AppStorage 的区别：

特性 LocalStorage AppStorage
作用域 页面及其子组件 整个应用
生命周期 页面销毁时清除 应用运行期间
创建方式 手动创建实例 系统自动创建
适用场景 页面内状态共享 跨页面状态共享

更多关于HarmonyOS 鸿蒙Next中@LocalStorageProp 和 @LocalStorageLink的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


@LocalStorageProp和@LocalStorageLink

[@LocalStorageProp](/user/LocalStorageProp)和[@LocalStorageLink](/user/LocalStorageLink)是鸿蒙Next中用于应用内UI组件与LocalStorage进行数据同步的装饰器。LocalStorage是页面级UI状态存储。

  • [@LocalStorageProp](/user/LocalStorageProp)装饰的变量与LocalStorage中对应属性建立单向同步，即LocalStorage中值变化会同步到组件，但组件内修改不会同步回LocalStorage。
  • [@LocalStorageLink](/user/LocalStorageLink)装饰的变量与LocalStorage中对应属性建立双向同步，LocalStorage中值变化会同步到组件，组件内修改也会同步回LocalStorage。

在HarmonyOS Next中，@LocalStorageProp和@LocalStorageLink是用于组件与页面级LocalStorage进行状态同步的装饰器，而@StorageProp和@StorageLink是用于与应用全局的AppStorage进行同步。

核心区别与作用域：

  1. 数据源与作用域：

    • @LocalStorageProp 和 @LocalStorageLink 的数据源是当前页面的LocalStorage实例。每个页面（Page）可以拥有自己独立的LocalStorage，其数据仅在该页面及其子组件的范围内有效，页面销毁后数据也随之释放。
    • @StorageProp 和 @StorageLink 的数据源是全局单例的AppStorage。其数据在整个应用生命周期内对所有页面和组件都可见，用于存储需要跨页面共享的全局状态。

  2. 同步机制：

    • @LocalStorageProp： 建立从LocalStorage到组件的单向同步。组件内对属性的修改不会回写到LocalStorage中。
    • @LocalStorageLink： 建立组件与LocalStorage之间的双向同步。组件内对属性的修改会自动更新LocalStorage中对应的值，反之亦然。
    • @StorageProp 和 @StorageLink 的同步机制与此完全对应，只是数据源换成了AppStorage。

页面间共享LocalStorage： LocalStorage默认是页面隔离的。若要在页面间共享数据，通常有几种方式：

  1. 通过页面路由参数传递：在跳转时通过router.pushUrl的params将数据传递到新页面，新页面可初始化自己的LocalStorage。
  2. 使用AppStorage：如果数据需要跨多个页面共享，应直接使用AppStorage（即@StorageProp/@StorageLink）。
  3. 通过UIAbility的上下文传递：对于更复杂的场景，可通过UIAbility的上下文（如want参数）在页面间传递数据引用，但LocalStorage本身并不直接支持跨页面实例访问。

适用场景：

  • @LocalStorageProp / @LocalStorageLink：适用于页面内部的状态管理。例如，管理一个复杂页面内多个子组件需要共享的UI状态（如一个折叠面板的展开状态、页面主题模式等），这些状态不需要持久化，且生命周期与页面绑定。
  • @StorageProp / @StorageLink：适用于应用全局的状态管理。例如，用户登录信息、全局主题设置、语言偏好等需要跨页面访问和持久化的数据。

在您提供的HydroQuiz项目中，可根据数据是否需要跨页面持久化共享来选择合适的装饰器。页面内部的临时状态共享可使用LocalStorage，而全局的用户设置或游戏进度则应使用AppStorage。

回到顶部