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

LocalStorage 是一个页面级别的 UI 状态存储，同时通过 @LocalStorageLink 和 @LocalStorageProp 分别实现数据的双向同步和单向同步。

本节讲解另一个状态存储 AppStorage（全局的 UI 状态存储）。AppStorage 也拥有两个装饰器，是 @StorageProp 和 @StorageLink，分别对应 LocalStorage 中的 @LocalStorageProp 和 @LocalStorageLink，可以与存储的数据建立单向数据传递和双向数据传递。

AppStorage 是和应用的进程绑定的，由 UI 框架在应用程序启动时创建，为应用程序 UI 状态属性提供中央存储。

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

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

1) 创建一个 UI 内部的状态存储，代码如下：

AppStorage.SetOrCreate('Prop',60)

2) 在入口组件中通过“@StorageProp('Prop') xxx：类型 = 值”的方式来接收存储的数据，在 UI 界面上编写按钮来展示数据，当单击按钮时修改数据，代码如下：

@Entry
@Component
struct StoragePropPage {
  // 单向绑定：仅读取
  @StorageProp('Prop') storagePropOne: number = 1;

  build() {
    Column({ space: 15 }) {
      // 点击后从 60 开始 +1，只影响当前组件
      Button(`Parent from AppStorage ${this.storagePropOne}`)
        .onClick(() => this.storagePropOne += 1);

      ChildStorageProp();
    }
  }
}

3) 添加一个子组件 ChildStorageProp，用于观察父组件在修改数据时是否为单向同步，代码如下：

@Component
struct ChildStorageProp {
  @StorageProp('Prop') storagePropTwo: number = 2;

  build() {
    Column({ space: 15 }) {
      // 无论父组件如何修改，这里始终显示 60
      Text(`Parent from AppStorage ${this.storagePropTwo}`);
    }
  }
}

代码运行效果如下图所示：


通过效果图可以看到，父子组件均可以读取到存储的数据，但是当父组件的数据被修改时，子组件的数据并没有发生改变，或者说通过 StorageProp 装饰器读取的数据是单向的。

完整代码如下：

// 初始化全局存储
AppStorage.SetOrCreate('Prop', 60);

@Entry
@Component
struct StoragePropPage {
  // 单向绑定：仅读取
  @StorageProp('Prop') storagePropOne: number = 1;

  build() {
    Column({ space: 15 }) {
      // 点击后从 60 开始 +1，只影响当前组件
      Button(`Parent from AppStorage ${this.storagePropOne}`)
        .onClick(() => this.storagePropOne += 1);

      ChildStorageProp();
    }
  }
}

@Component
struct ChildStorageProp {
  @StorageProp('Prop') storagePropTwo: number = 2;

  build() {
    Column({ space: 15 }) {
      // 无论父组件如何修改，这里始终显示 60
      Text(`Parent from AppStorage ${this.storagePropTwo}`);
    }
  }
}

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

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

子组件代码如下：

@Component
struct ChildStorageProp2 {
  @StorageLink('Prop') storagePropTwo: number = 2;

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

完整代码如下：

// 初始化全局存储
AppStorage.SetOrCreate('Prop', 60);

@Entry
@Component
struct StoragePropPage1 {
  // 双向绑定
  @StorageLink('Prop') storagePropOne: number = 1;

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

      ChildStorageProp2();
    }
  }
}

@Component
struct ChildStorageProp2 {
  @StorageLink('Prop') storagePropTwo: number = 2;

  build() {
    Column({ space: 15 }) {
      Button(`Child from AppStorage ${this.storagePropTwo}`)
        .onClick(() => this.storagePropTwo += 1);
    }
  }
}

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

注意，无论 LocalStorage 页面级 UI 状态存储，还是 AppStorage 应用全局的 UI 状态存储，均在 UI 内部使用，而非应用逻辑内。