当前位置：首页 > news >正文

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

news 2025/7/15 10:45:07

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_Messagebuild() {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(() => {// 每次点击年龄加1this.age += 1;// 名字追加【-GO-】this.name += "【-GO-】";// 布尔值变为 falsethis.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%"); // 列组件的宽度设置为全屏}
}