引言

前面文章介绍了应用全局单例的UI状态存储AppStorage 机制LocalStorageOpenHarmony 入门——ArkUI 跨页面数据同步和应用全局单例的UI状态存储AppStorage 小结（三）的基础语法和使用，这一篇介绍持久化存储UI状态PersistentStorage。

一、PersistentStorage 持久化存储UI状态概述

LocalStorage和AppStorage都是运行时的内存，在应用退出后就会丢失，如果想要应用再次启动后依然能保存选定的状态，那就需要用PersistentStorage。
PersistentStorage是应用程序中的可选单例对象。它是持久化存储选定的AppStorage属性，以确保这些属性在应用程序重新启动时的值与应用程序关闭时的值相同。PersistentStorage将选定的AppStorage属性保留在设备磁盘上。应用程序通过API以决定哪些AppStorage属性应借助PersistentStorage持久化。UI和业务逻辑不直接访问PersistentStorage中的属性，所有属性访问都是对AppStorage的访问，AppStorage中的更改会自动同步到PersistentStorage。PersistentStorage和AppStorage中的属性建立双向同步。应用开发通常通过AppStorage访问PersistentStorage，另外还有一些接口可以用于管理持久化属性，但是业务逻辑始终是通过AppStorage获取和设置属性的。

二、PersistentStorage限制条件

1、PersistentStorage允许的类型和值有：

• number, string, boolean, enum 等简单类型。
• 可以被JSON.stringify()和JSON.parse()重构的对象。例如Date, Map, Set等内置类型则不支持，以及对象的属性方法不支持持久化。

2、PersistentStorage不允许的类型和值有：

• 不支持嵌套对象（对象数组，对象的属性是对象等）。因为目前框架无法检测AppStorage中嵌套对象（包括数组）值的变化，所以无法写回到PersistentStorage中。
• 不支持undefined 和 null 。

3、持久化数据是一个相对缓慢的操作，应用程序应避免以下情况：

• 持久化大型数据集。
• 持久化经常变化的变量。
  PersistentStorage的持久化变量最好是小于2kb的数据，不要大量的数据持久化，因为PersistentStorage写入磁盘的操作是同步的，大量的数据本地化读写会同步在UI线程中执行，影响UI渲染性能。

如果开发者需要存储大量的数据，建议使用数据库。

PersistentStorage和UI实例相关联，持久化操作需要在UI实例初始化成功后（即loadContent传入的回调被调用时）才可以被调用，早于该时机调用会导致持久化失败。

// EntryAbility.ets
onWindowStageCreate(windowStage: window.WindowStage): void {
  windowStage.loadContent('pages/Index', (err) => {
    if (err.code) {
      return;
    }
    PersistentStorage.persistProp('aProp', 47);
  });
}

三、PersistentStorage 的应用

PersistentStorage是应用程序中的可选单例对象。它是持久化存储选定的AppStorage属性，AppStorage的创建略，请参见上文。

1、从AppStorage中访问PersistentStorage初始化的属性

1.1、实现步骤

• 初始化PersistentStorage

PersistentStorage.persistProp('aProp', 47);

• 在AppStorage获取对应属性

AppStorage.get<number>('aProp'); // returns 47

• 或在组件内部通过AppStorage的装饰器来定义

@StorageLink('aProp') aProp: number = 48;

完整代码如下：

PersistentStorage.persistProp('aProp', 47);

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @StorageLink('aProp') aProp: number = 48

  build() {
    Row() {
      Column() {
        Text(this.message)
        // 应用退出时会保存当前结果。重新启动后，会显示上一次的保存结果
        Text(`${this.aProp}`)
          .onClick(() => {
            this.aProp += 1;
          })
      }
    }
  }
}

1.2、新应用安装后首次启动运行的流程

• 调用persistProp初始化PersistentStorage，首先查询在PersistentStorage本地文件中是否存在“aProp”，查询结果为不存在，因为应用是第一次安装。
• 接着查询属性“aProp”在AppStorage中是否存在，依旧不存在。
• 在AppStorge中创建名为“aProp”的number类型属性，属性初始值是定义的默认值47。
• PersistentStorage将属性“aProp”和值47写入磁盘，AppStorage中“aProp”对应的值和其后续的更改将被持久化。
• 在Index组件中创建状态变量@StorageLink(‘aProp’) aProp，和AppStorage中“aProp”双向绑定，在创建的过程中会在AppStorage中查找，成功找到“aProp”，所以使用其在AppStorage找到的值47。
  

1.3、点击按钮后触发的流程：

• 状态变量@StorageLink(‘aProp’) aProp改变，触发Text组件重新刷新。
• @StorageLink装饰的变量是和AppStorage中建立双向同步的，所以@StorageLink(‘aProp’) aProp的变化会被同步回AppStorage中。
• AppStorage中“aProp”属性的改变会同步到所有绑定该“aProp”的单向或者双向变量，在本示例中没有其他的绑定“aProp”的变量。
• 因为“aProp”对应的属性已经被持久化，所以在AppStorage中“aProp”的改变会触发PersistentStorage，将新的改变写入本地磁盘。

1.4、后续启动应用流程：

• 执行PersistentStorage.persistProp(‘aProp’, 47)，在首先查询在PersistentStorage本地文件查询“aProp”属性，成功查询到。
• 将在PersistentStorage查询到的值写入AppStorage中。
• 在Index组件里，@StorageLink绑定的“aProp”为PersistentStorage写入AppStorage中的值，即为上一次退出应用存入的值。

2、在PersistentStorage之后访问AppStorage中的属性

可以先判断是否需要覆盖上一次保存在PersistentStorage中的值，如果需要覆盖，再调用AppStorage的接口进行修改，如果不需要覆盖，则不调用AppStorage的接口。

PersistentStorage.persistProp('aProp', 48);
if (AppStorage.get('aProp') > 50) {
    // 如果PersistentStorage存储的值超过50，设置为47
    AppStorage.setOrCreate('aProp',47);
}

反面操作，在PersistentStorage之前访问AppStorage中的属性，在调用PersistentStorage.persistProp或者persistProps之前使用接口访问AppStorage中的属性是错误的，因为这样的调用顺序会丢失上一次应用程序运行中的属性值

PersistentStorage.persistProp('aProp', 48);
if (AppStorage.get('aProp') > 50) {
    // 如果PersistentStorage存储的值超过50，设置为47
    AppStorage.setOrCreate('aProp',47);
}

应用在非首次运行时，先执行AppStorage.setOrCreate(‘aProp’, 47)：属性“aProp”在AppStorage中创建，其类型为number，其值设置为指定的默认值47。“aProp”是持久化的属性，所以会被写回PersistentStorage磁盘中，PersistentStorage存储的上次退出应用的值丢失。PersistentStorage.persistProp(‘aProp’, 48)：在PersistentStorage中查找到“aProp”，值为刚刚使用AppStorage接口写入的47。

四、Environment 设备环境查询

Environment是ArkUI框架在应用程序启动时创建的单例对象。它为AppStorage提供了一系列描述应用程序运行状态的属性。Environment的所有属性都是不可变的（即应用不可写入），所有的属性都是简单类型。

1、 内置参数

2、限制条件

Environment和UIContext相关联，需要在UIContext明确的时候才可以调用。可以通过在runScopedTask里明确上下文。如果没有在UIContext明确的地方调用，将导致无法查询到设备环境数据。

// EntryAbility.ets
import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.loadContent('pages/Index');
    let window = windowStage.getMainWindow()
    window.then(window => {
      let uicontext = window.getUIContext()
      uicontext.runScopedTask(() => {
        Environment.envProp('languageCode', 'en');
      })
    })
  }
}

3、使用

3.1、从UI中访问Environment参数

• 使用Environment.envProp将设备运行的环境变量存入AppStorage中

// 将设备的语言code存入AppStorage，默认值为en
Environment.envProp('languageCode', 'en');

• 可以使用@StorageProp链接到Component中

@StorageProp('languageCode') lang : string = 'en';

设备环境到Component的更新链：Environment --> AppStorage -->Component。

@StorageProp关联的环境参数可以在本地更改，但不能同步回AppStorage中，因为应用对环境变量参数是不可写的，只能在Environment中查询。

// 将设备languageCode存入AppStorage中
Environment.envProp('languageCode', 'en');
@Entry
@Component
struct Index {
  @StorageProp('languageCode') languageCode: string = 'en';

  build() {
    Row() {
      Column() {
        // 输出当前设备的languageCode
        Text(this.languageCode)
      }
    }
  }
}

3.2、应用逻辑使用Environment

// 使用Environment.EnvProp将设备运行languageCode存入AppStorage中；
Environment.envProp('languageCode', 'en');
// 从AppStorage获取单向绑定的languageCode的变量
const lang: SubscribedAbstractProperty<string> = AppStorage.prop('languageCode');

if (lang.get() === 'zh') {
  console.info('你好');
} else {
  console.info('Hello!');
}

五、其他状态管理

除了组件状态管理和应用状态管理，ArkTS还提供了@Watch、$$运算符和@Track来为开发者提供更多功能：

1、@Watch 用于监听状态变量的变化，作用是在状态变量的值改变时可以触发@Watch绑定的回调函数

@Component
struct TotalView {
  @Prop @Watch('onCountUpdated') count: number = 0;
  @State total: number = 0;
  // @Watch 回调
  onCountUpdated(propName: string): void {
    this.total += this.count;
  }
  build() {
    Text(`Total: ${this.total}`)
  }
}

@Entry
@Component
struct CountModifier {
  @State count: number = 0;
  build() {
    Column() {
      Button('add to basket')
        .onClick(() => {
          this.count++
        })
      TotalView({ count: this.count })
    }
  }
}

2、$$运算符 给内置组件提供TS变量的引用，使得TS变量和内置组件的内部状态保持同步。

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State text: string = ''
  controller: TextInputController = new TextInputController()
  build() {
    Column({ space: 20 }) {
      Text(this.text)
      TextInput({ text: $$this.text, placeholder: 'input your word...', controller: this.controller})
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

3、@Track 应用于class对象的属性级更新，@Track装饰的属性变化时，只会触发该属性关联的UI更新。当一个class对象是状态变量时，@Track装饰的属性发生变化，该属性关联的UI触发更新。

更多参见@Track装饰器