微商城手机网站,网站视频源码地址,百度地图人工电话,商城 小程序arkUI#xff1a;持久化储存UI状态的基本用法#xff08;PersistentStorage#xff09; 1 主要内容说明2 例子2.1 持久化储存UI状态的基本用法#xff08;PersistentStorage#xff09;2.1.1 源码1的相关说明2.1.1.1 数据存储2.1.1.2 数据读取2.1.1.3 动态更新2.1.1.4 显示… arkUI持久化储存UI状态的基本用法PersistentStorage 1 主要内容说明2 例子2.1 持久化储存UI状态的基本用法PersistentStorage2.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; // 默认值为0StorageLink(name)name: string ; // 默认值为空字符串StorageLink(bool)bool: boolean false; // 默认值为 falseStorageLink(UserMessage)myUserMessage: User_Message {} as User_Message; // 默认值为空对象类型为 User_Messagebuild() {Column() {// 显示存储的年龄number 类型Text(储存的年龄agenumber类)Text(this.age ).backgroundColor(#fcc).fontSize(30).margin({ bottom: 30, top: 10 });// 显示存储的名字string 类型Text(储存的名字namestring类)Text(this.name ).backgroundColor(#ff4bd94b).fontSize(30).margin({ bottom: 30, top: 10 });// 显示存储的布尔值Text(储存的布尔值boolboolean类)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%); // 列组件的宽度设置为全屏}
}
2.1.3 源码1运行效果
2.1.3.1 效果视频
视频效果 PersistentStorage持久化储存的基本使用 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.结语
持久化存储 (PersistentStorage) 为轻量级的储存方式若想对于庞大的数据内容进行储存还是得使用数据库的储存方式。本文关于持久化储存只是简单的逻辑结构的编写记录目的在于我们先了解持久化储存的基本格式以后再逐步添加复杂的用法。
持久化PersistentStorage的相关的内容华为官方的指南地址PersistentStorage持久化存储UI状态
由于笔者的能力有限创作的内容有所不足在所难免也敬请读者包涵和指出万分感谢
4.定位日期
待视频审核通过 2024-11-30 10:48
2024-11-30 11:07
