arkTS：持久化储存UI状态的基本用法（PersistentStorage）

news2024/12/27 10:49:54

arkUI：持久化储存UI状态的基本用法（PersistentStorage）

1 主要内容说明
2 例子
- 2.1 持久化储存UI状态的基本用法（PersistentStorage）
- - 2.1.1 源码1的相关说明
  - - 2.1.1.1 数据存储
    - 2.1.1.2 数据读取
    - 2.1.1.3 动态更新
    - 2.1.1.4 显示数据
  - 2.1.2 源码1 （持久化储存）
  - 2.1.3 源码1运行效果
  - - 2.1.3.1 效果视频
    - 2.1.3.2 效果截图
    - - 2.1.3.2.1 默认情况下
      - 2.1.3.2.2 点击按钮第一下
      - 2.1.3.2.3 点击按钮第二下
      - 2.1.3.2.4 点击按钮第三下
      - 2.1.3.2.5 退出程序
      - 2.1.3.2.6 重新进入程序
3.结语
4.定位日期

1 主要内容说明

持久化存储 (PersistentStorage) ，它提供了一种将数据保存到磁盘的机制，使得数据在应用关闭后仍能被保留和访问。通过调用 PersistentStorage.persistProp 方法，可以将各种类型的数据（如数字、字符串、布尔值以及复杂对象）存储起来。例如，代码中存储了用户的年龄、名字、布尔状态，以及包含多个属性的用户信息对象。这些存储的数据会与磁盘同步，确保数据的持久性。

关于后面源码1的内容，为了方便使用，代码通过 @StorageLink 装饰器将持久化存储的数据绑定到组件的属性中。例如，@StorageLink(“age”) 将磁盘中的 age 数据直接关联到组件的 age 属性。这种绑定方式的优势在于，属性值的变化会自动更新到存储中，反之亦然。

此外，源码1还展示了如何动态更新持久化数据。通过按钮点击事件，代码修改了存储中的多个值，例如年龄递增、字符串追加、布尔值变更，以及对象属性的更新。更新后的值会立即反映在存储中，并通过绑定属性实时同步到用户界面。也就是说点击后的效果会一直保持，退出程序后再进入程序，显示的也是上次退出前的状态。对比，若不使用持久化储存，每次关闭程序后再打开，显示的都是初始默认情况的画面，并不会储存上传退出前的状态。

2 例子

2.1 持久化储存UI状态的基本用法（PersistentStorage）

2.1.1 源码1的相关说明

2.1.1.1 数据存储

使用 PersistentStorage.persistProp 方法将各种类型的数据（数值、字符串、布尔值和对象）持久化存储到磁盘，例如：

	数字：PersistentStorage.persistProp("age", 22)
	字符串：PersistentStorage.persistProp("name", "jack")
	布尔值：PersistentStorage.persistProp("bool", true)
	对象：PersistentStorage.persistProp("UserMessage", {...})

2.1.1.2 数据读取

使用 @StorageLink 装饰器将存储的数据绑定到组件的属性中，数据会在组件中自动更新。如：

	@StorageLink("age") age: number = 0; 通过 "age" 属性访问存储的年龄。

2.1.1.3 动态更新

通过点击按钮，更新存储的值，并实时同步到 UI，例如：

	年龄自增：this.age += 1;
	更新对象中的字段：this.myUserMessage.age += 2;

2.1.1.4 显示数据

将存储的值通过 UI 元素（如 Text）展示出来，并支持 JSON 格式化显示对象。

2.1.2 源码1 （持久化储存）

// 定义用户信息的接口，包含名字、年龄、身高三个属性
export interface User_Message {
  name: string;  // 用户的名字
  age: number;   // 用户的年龄
  height: number; // 用户的身高
}

// 使用 PersistentStorage 初始设置磁盘存储的值
// 数值类型存储：年龄
PersistentStorage.persistProp("age", 22);

// 字符串类型存储：名字
PersistentStorage.persistProp("name", "jack");

// 布尔类型存储：一个布尔值
PersistentStorage.persistProp("bool", true);

// 对象类型存储：存储用户信息对象，遵循 User_Message 接口
PersistentStorage.persistProp("UserMessage", { name: "jack", age: 23, height: 168 } as User_Message);

@Entry
@Component
struct Page_PersistentStorage {
  // 将存储的值链接到组件属性
  @StorageLink("age")
  age: number = 0; // 默认值为0

  @StorageLink("name")
  name: string = ""; // 默认值为空字符串

  @StorageLink("bool")
  bool: boolean = false; // 默认值为 false

  @StorageLink("UserMessage")
  myUserMessage: User_Message = {} as User_Message; // 默认值为空对象，类型为 User_Message

  build() {
    Column() {
      // 显示存储的年龄（number 类型）
      Text("储存的年龄age，number类：")
      Text(this.age + "")
        .backgroundColor("#fcc")
        .fontSize(30)
        .margin({ bottom: 30, top: 10 });

      // 显示存储的名字（string 类型）
      Text("储存的名字name，string类：")
      Text(this.name + "")
        .backgroundColor("#ff4bd94b")
        .fontSize(30)
        .margin({ bottom: 30, top: 10 });

      // 显示存储的布尔值
      Text("储存的布尔值bool，boolean类：")
      Text(this.bool + "")
        .backgroundColor("#ff4798fa")
        .fontSize(30)
        .margin({ bottom: 30, top: 10 });

      // 显示存储的用户信息（对象类型）
      Text("储存的个人信息，自 User_Message 类：")
      Text(JSON.stringify(this.myUserMessage)) // 使用 JSON.stringify 显示对象内容
        .backgroundColor("#ffe3e349")
        .fontSize(30)
        .margin({ bottom: 30, top: 10 });

      // 按钮用于更改存储值
      Button("点击变换")
        .onClick(() => {
          // 每次点击年龄加1
          this.age += 1;

          // 名字追加【-GO-】
          this.name += "【-GO-】";

          // 布尔值变为 false
          this.bool = false;

          // 更新用户信息对象
          this.myUserMessage.name += "【-go-】";
          this.myUserMessage.age += 2;
          this.myUserMessage.height += 10;
        });

      // 说明点击按钮后数据的变化
      Text(` --age++ \n --name += 【-GO-】 \n --bool =false \n --对象类：名字+【-go-】，年龄+2，身高+10`);
    }
    .height("100%") // 列组件的高度设置为全屏
    .width("100%"); // 列组件的宽度设置为全屏
  }
}