ArkTS LocalStorage用法详解（附带实例）

装饰器仅能在页面内即一个组件树上，共享状态变量。如果开发者要实现应用级的或者多个页面的状态数据共享，就需要用到应用级别的状态管理的概念。

ArkTS 拥有多种应用状态的管理能力，包括：

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

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

LocalStorage 支持 UIAbility 实例内多个页面间的状态共享。其具有如下特点：

• LocalStorage 是 ArkTS 提供的内存“数据库”，用于存储页面级别的状态变量；
• 应用程序可以创建多个 LocalStorage 实例，并支持在页面内和跨页面、UIAbility 实例间共享；
• 根组件（@Entry装饰的@Component）可分配 LocalStorage 实例，其子组件自动获得访问权限；
• 每个组件最多访问一个 LocalStorage 实例和 AppStorage，未标记 @Entry 的组件只能接收来自父组件的实例；
• LocalStorage 属性是可变的，其生命周期由应用程序管理，垃圾回收由 JS Engine 负责；
• 提供了 @LocalStorageProp 和 @LocalStorageLink 两个装饰器，分别用于建立单向和双向同步关系。

ArkTS @LocalStorageProp装饰器（单向同步）

我们可以通过以下几个步骤来创将一个简单的单向同步实例。

1) 使用构造函数创建 LocalStorage 实例 storage，通过 setOrCreate('key',value) 来设置存储的 valu（e值），同时通过 key 来读取存储的值，代码如下：

let storage = new LocalStorage();
storage.setOrCreate('PropA',47);

2) 使用 @Entry 装饰器将 storage 添加到顶层组件中，以“@LocalStorageProp(key) xxx:类型=值”的形式读取存储的值，其中 xxx 是自定义的变量名称，代码如下：

@Entry(storage)
@Component
struct Demo1 {
  // 与 LocalStorage 中的 'PropA' 建立双向绑定
  @LocalStorageLink('PropA') storageLinkOne: number = 1;

  build() {
    Column({ space: 15 }) {
      Button(`Parent from LocalStorage ${this.storageLinkOne}`)
        .onClick(() => this.storageLinkOne += 1);

      // 子组件 Demo2 自动获得同一 LocalStorage 实例的访问权限
      Demo2();
    }
  }
}

3) 创建一个组件 Demo2() 用作参考，代码如下：

@Component
export struct Demo2 {
  // 单向绑定：仅读取，不受 Demo1 影响
  @LocalStorageProp('PropA') storProp2: number = 2;

  build() {
    Column({ space: 15 }) {
      Text(`Parent from LocalStorage ${this.storProp2}`);
    }
  }
}

@LocalStorageProp 装饰器（单向同步）效果如下图所示：


通过效果图可以看到，父子组件均可以读取到存储的数据，但是当父组件的数据被修改时，子组件的数据并没有发生改变，或者说通过 storage.setOrCreate 存储的数据并不会发生改变。

注意，需要将 storage 添加到顶层组件 @Entry(storage) 中，否则无法读取到存储的数据。

ArkTS @LocalStorageLink装饰器（双向同步）

双向同步的案例可直接使用 @LocalStorageProp 装饰器中的案例，只需将对应的 @LocalStorageProp 装饰器改为 @LocalStorageLink 即可。同时为了展示双向同步的效果，需要对子组件进行简单的修改。

子组件内容如下：

@Component
struct Demo2 {
  // 双向绑定
  @LocalStorageLink('PropA') storageLinkTwo: number = 1;

  build() {
    Button(`Child from LocalStorage ${this.storageLinkTwo}`)
      // 修改会同步到 LocalStorage 与父组件
      .onClick(() => this.storageLinkTwo += 1);
  }
}

完整代码如下：

// 创建并初始化 LocalStorage
let storage = new LocalStorage();
storage.setOrCreate('PropA', 47);

@Component
struct Demo2 {
  // 双向绑定
  @LocalStorageLink('PropA') storageLinkTwo: number = 1;

  build() {
    Button(`Child from LocalStorage ${this.storageLinkTwo}`)
      // 修改会同步到 LocalStorage 与父组件
      .onClick(() => this.storageLinkTwo += 1);
  }
}

@Entry(storage)
@Component
struct Demo1 {
  // 双向绑定
  @LocalStorageLink('PropA') storageLinkOne: number = 1;

  build() {
    Column({ space: 15 }) {
      Button(`Parent from LocalStorage ${this.storageLinkOne}`)
        .onClick(() => this.storageLinkOne += 1);

      // 子组件自动获得对同一 LocalStorage 实例的访问
      Demo2();
    }
  }
}

此时运行代码，会发现无论是子组件的按钮，还是父组件的按钮，在触发时均会同步修改数据，也就是说 @LocalStorageLink 装饰器是可以和存储的数据进行双向同步的。