arkTS：使用ArkUI实现用户信息的持久化管理与自动填充（PersistentStorage）

1 主要内容说明

PersistentStorage 是 ArkUI 提供的一种持久化存储解决方案，用于在应用程序中保存数据，并支持跨会话的数据管理和状态保持。通过 PersistentStorage，开发者可以轻松实现数据的本地存储，以满足诸如用户设置、登录信息、会话状态等需要长期保存数据的场景。

持久化存储 通过 PersistentStorage API 实现，将用户的账号、密码以及其他设置数据（如是否记住密码）保存到本地存储中，以便在应用重新启动或用户退出后，能够自动加载和恢复之前的状态。这样，用户无需每次登录时重新输入账号密码，特别是在“记住密码”功能启用时，系统会自动填充账号和密码，提供更流畅的用户体验。

在注册页面中，持久化存储用于保存用户输入的账号和密码信息，将它们存储在一个数组中。登录页面则通过从持久化存储读取这些信息，验证用户输入的账号密码是否匹配，并根据验证结果进行相应的操作。当用户勾选了“记住密码”选项时，账号和密码会被持续保存，以便下次直接登录。此外，登录页面还会根据用户的选择决定是否修改已存储的密码信息。

2 例子

这个项目通过三部分代码展示了一个简单的用户管理流程：注册、登录以及登录成功后的展示。核心技术围绕 ArkUI 和 持久化存储（PersistentStorage）展开，实现了用户信息的持久化保存与加载。

• 注册页面 --------- 实现了用户信息的输入、存储与显示，并将用户的账号和密码保存到本地持久化存储中，保证用户数据的长期保存。

• 登录页面 --------- 则提供了账号密码输入和验证功能，并支持“记住密码”功能，通过持久化存储保存用户的登录状态。

• 登录成功页面 --------- 通过展示简单的欢迎信息，确认用户的登录成功，体现了项目的流畅用户体验。

这个项目是一个基础的示例，适合用于学习 ArkUI 的持久化存储操作、组件化开发以及用户交互设计的基础应用。

2.1 登录页

2.1.1登陆页的相关说明

登录页面 (Page_PersistentStorage_Case_Login)

2.1.1.1 持久化存储的初始化

使用 PersistentStorage.persistProp 方法初始化持久化存储数据，包括默认的账号、密码、记住密码设置等。

2.1.1.2 输入框

账号和密码的输入框中，分别处理了默认填充已保存账号和密码的逻辑，只有在选中“记住密码”且允许修改时，才会显示保存的数据。

2.1.1.3 记住密码选项

用户可以选择是否记住密码。选中时，将状态保存到持久化存储，并且根据是否记住密码决定是否允许修改密码。

2.1.1.4 登录按钮的逻辑

点击登录按钮时，首先会从存储中获取已注册的用户信息，验证账号密码是否匹配。如果匹配，则跳转到主页面，并保存账号和密码；否则提示错误信息。

2.1.1.5 注册跳转

如果用户没有账号，可以点击“注册账号”跳转到注册页面进行注册。

2.1.2 源码1 （登录页–文件：Page_PersistentStorage_Case_Login.etsf）

/*** 登录页面*/
import { User_Message } from './Page_PersistentStorage_Case_Register'
import { promptAction } from '@kit.ArkUI'// 初始化持久化存储数据
// 初始化用户信息数组，包含一个默认账号和密码
PersistentStorage.persistProp("userMessageArr", [{ userAccount: "测试账号", userPassword: "测试密码" } as User_Message]);// 初始化保存的登录账号和密码，用于记住功能
PersistentStorage.persistProp("userAccountRemember", "临时保存账号"); // 默认保存的账号
PersistentStorage.persistProp("userPasswordRemember", "passwordRemember"); // 默认保存的密码// 初始化是否记住密码的状态
PersistentStorage.persistProp("isRememberPassword", false); // 默认不记住密码// 初始化是否允许修改记住密码状态的标志
PersistentStorage.persistProp("isChangeRemember", false); // 默认不可改变记住密码的状态@Entry
@Component
struct Page_PersistentStorage_Case_Login {// 用户输入的账号@State userAccount: string = "";// 用户输入的密码@State userPassword: string = "";// 持久化存储：成功登录后保存的账号@StorageLink("userAccountRemember")userAccountRemember: string = "userAccount--测试账号";// 持久化存储：成功登录后保存的密码@StorageLink("userPasswordRemember")userPasswordRemember: string = "password";// 持久化存储：是否记住密码@StorageLink("isRememberPassword")isRememberPassword: boolean = false;// 持久化存储：是否允许修改记住密码状态@StorageLink("isChangeRemember")isChangeRemember: boolean = false;build() {Column({ space: 10 }) {// 显示登录页面的标题Text("登录").fontSize(30).fontWeight(800);// 账号输入框Row() {Text("账号：");// 仅当允许修改记住密码状态且选中记住密码时，使用存储的账号，否则使用用户输入的账号TextInput({ placeholder: "请输入账号", text: (this.isChangeRemember && this.isRememberPassword) ? this.userAccountRemember : this.userAccount }).layoutWeight(1).onChange((value) => {this.userAccount = value; // 更新用户输入的账号});}// 密码输入框Row() {Text("密码：");// 仅当允许修改记住密码状态且选中记住密码时，使用存储的密码，否则使用用户输入的密码TextInput({ placeholder: "请输入密码", text: (this.isChangeRemember && this.isRememberPassword) ? this.userPasswordRemember : this.userPassword }).layoutWeight(1).type(InputType.Password) // 设置密码类型.onChange((value) => {this.userPassword = value; // 更新用户输入的密码console.log("输入的密码：" + this.userPasswordRemember);});}// 功能选项行，包含注册和记住密码的选项Row() {Blank();// 点击跳转到注册页面Text("注册账号").onClick(() => {this.getUIContext().getRouter().pushUrl({ url: "pages/Page_PersistentStorage/Case/Page_PersistentStorage_Case_Register" });});Blank();// 显示记住密码的选项Text("记住密码");Checkbox().shape(CheckBoxShape.ROUNDED_SQUARE) // 设置为方形复选框.select(this.isRememberPassword) // 当前是否选中.onChange((value: boolean) => {this.isRememberPassword = value; // 更新是否记住密码的选中状态AppStorage.setOrCreate("isRememberPassword", this.isRememberPassword); // 更新到持久化存储console.log("密码是否选中：" + this.isRememberPassword);// 如果取消选择记住密码，禁止修改记住密码状态this.isChangeRemember = false;AppStorage.setOrCreate("isChangeRemember", this.isChangeRemember);console.log("可改变状态--复选框：" + this.isChangeRemember);});Blank();}.width("100%");// 登录按钮Button("登录").width("50%").onClick(() => {// 从持久化存储中获取用户信息数组let userMessageArr: User_Message[] = AppStorage.get("userMessageArr") as [];console.log("登录页数组信息：" + JSON.stringify(userMessageArr));// 初始化过滤后的用户信息数组let personageAccount: User_Message[] = [{ userAccount: "测试账号", userPassword: "测试密码" }];// 过滤用户信息数组，查找匹配的账号personageAccount = userMessageArr.filter((item, vale) => {if (item.userAccount == this.userAccount) {return item; // 返回匹配的账号信息} else {return;}});console.log("筛选过后的内容：" + JSON.stringify(personageAccount));// 根据过滤结果判断登录是否成功if (personageAccount.length > 0) {// 如果密码正确，登录成功if (personageAccount[0].userPassword == this.userPassword) {// 跳转到主页面this.getUIContext().getRouter().pushUrl({ url: "pages/Page_PersistentStorage/Case/Page_PersistentStorage_Case_Main" });// 登录成功后将账号和密码保存到持久化存储AppStorage.setOrCreate("userAccountRemember", this.userAccount);AppStorage.setOrCreate("userPasswordRemember", this.userPassword);console.log("保存的账号：" + this.userAccount);console.log("保存的密码：" + this.userPassword);// 允许修改记住密码状态this.isChangeRemember = true;AppStorage.setOrCreate("isChangeRemember", this.isChangeRemember);console.log("可改变状态--登录：" + this.isChangeRemember);} else {// 密码错误时，弹出提示promptAction.showToast({ message: "输入的密码错误！" });}} else {// 如果账号未注册，弹出提示promptAction.showToast({ message: "账号未注册，可点击注册注册账号！" });}});}.height('100%').width('100%').padding({ left: 10, right: 10 });}
}

2.2 注册页

2.2.1 注册页的相关说明

注册页面 (Page_PersistentStorage_Case_Register)

2.2.1.1 功能

用户通过该页面进行注册，输入账号和密码后，用户信息会被保存到持久化存储中（userMessageArr）。注册成功后，用户的信息（账号和密码）会在页面上显示，并提示注册成功。

2.2.1.2 持久化存储

使用 PersistentStorage.persistProp() 初始化并保存用户信息数组 userMessageArr，存储用户注册时填写的账号和密码。

2.2.1.3 关键交互

用户输入账号和密码，点击“注册”按钮后，信息被保存到存储中，并展示成功信息。

2.2.2 源码2（注册页–文件：Page_PersistentStorage_Case_Register）

/*** 注册页面*/
// 定义用户信息类 User_Message，包含账号和密码属性
export interface User_Message {userAccount: string; // 用户账号userPassword: string; // 用户密码
}// 初始化持久化存储，创建一个空的用户信息数组
PersistentStorage.persistProp("userMessageArr", []);@Entry
@Component
struct Page_PersistentStorage_Case_Register {@State isRegister: boolean = false; // 是否完成注册状态@State userAccount: string = ""; // 输入的账号@State userPassword: string = ""; // 输入的密码build() {Column() {// 页面顶部的标题Column({ space: 10 }) {Text("注册").fontSize(30).fontWeight(800);// 账号输入框Row() {Text("账号：");TextInput({ placeholder: "请输入账号", text: $$this.userAccount }).layoutWeight(1); // 设置输入框占据行的剩余空间}// 密码输入框Row() {Text("密码：");TextInput({ placeholder: "请输入密码", text: $$this.userPassword }).layoutWeight(1) // 设置输入框占据行的剩余空间.type(InputType.Password); // 设置输入框类型为密码}// 操作按钮Row() {// 注册按钮Button("注册").width("40%").onClick(() => {this.isRegister = true; // 标记注册成功// 从存储中获取当前用户信息数组let userMessageArr: User_Message[] = AppStorage.get("userMessageArr") as [];// 创建一个新用户对象，包含输入的账号和密码let newUserMessagePersonage = {userAccount: this.userAccount,userPassword: this.userPassword,} as User_Message;// 将新用户信息添加到用户信息数组中userMessageArr.push(newUserMessagePersonage);// 将更新后的用户信息数组保存到持久化存储AppStorage.setOrCreate("userMessageArr", userMessageArr);console.log(JSON.stringify("人员信息数组内容：" + JSON.stringify(userMessageArr)));});// 返回按钮Button("返回").width("40%").onClick(() => {// 返回到上一个页面this.getUIContext().getRouter().back();this.isRegister = false; // 重置注册状态});}.width("100%").justifyContent(FlexAlign.SpaceEvenly); // 按钮水平均匀分布// 注册完成后显示注册信息if (this.isRegister) {Column({ space: 10 }) {Text("注册完成，信息如下：").fontSize(20).fontWeight(800);// 显示注册成功的账号和密码Text("账号：" + this.userAccount);Text("密码：" + this.userPassword);}.width("100%").alignItems(HorizontalAlign.Start) // 左对齐.margin({ top: 50 }); // 设置顶部间距}}.height("100%").width("100%");}.height("100%").width("100%").padding({ left: 10, right: 10 }); // 设置页面左右内边距}
}

2.3 登陆成功的页面

2.3.1 登陆成功页面的相关说明

登录成功页面 (Page_PersistentStorage_Case_Main)

2.3.1.1 功能

展示用户登录成功的欢迎信息，简单地提示“登陆成功，欢迎使用！”。

2.3.1.2 持久化存储

该页面主要是显示登录成功后的提示信息，不涉及持久化存储的操作。

2.3.1.3 关键交互

没有复杂的交互，主要通过状态显示登录成功的信息

2.3.2 源码3（登陆成功的页面–文件：Page_PersistentStorage_Case_Main）

/*** 用于显示登陆成功的页面* 展示简单的欢迎信息，提示用户登陆成功。*/@Entry
@Component
struct Page_PersistentStorage_Case_Main {// 欢迎信息@State message: string = '登陆成功，欢迎使用！';build() {// 使用 RelativeContainer 布局，使欢迎信息居中显示RelativeContainer() {// 显示欢迎信息的文本Text(this.message).id('Page_PersistentStorage_Case_MainHelloWorld') // 为组件指定唯一 ID，方便调试或样式绑定.fontSize(50) // 设置字体大小.fontWeight(FontWeight.Bold) // 设置字体加粗.alignRules({center: { anchor: '__container__', align: VerticalAlign.Center }, // 垂直居中middle: { anchor: '__container__', align: HorizontalAlign.Center }, // 水平居中});}.height('100%') // 设置容器高度为全屏.width('100%'); // 设置容器宽度为全屏}
}

2.4 源码1,2,3组成的项目的运行效果

2.4.1 效果视频

2.4.2 效果截图

2.4.2.1 使用模拟器打开 登陆页，默认情况

• 默认情况
  

2.4.2.2 点击 注册账号

• 点击 注册账号
  

2.4.2.3 进入账号注册页

• 进入账号注册页
  

2.4.2.4 注册内容

• 注册内容，完毕后点击返回可回到登陆页
  

2.4.2.5 点击 返回 回到 登陆页

• 点击 返回 回到 登陆页
  

2.4.2.6 账号和密码无误后登陆成功

• 账号和密码无误后登陆成功
  

2.4.2.7 文件路径关系截图

3.结语

本文只是根据persistentStorage的内容，举一个例子，以巩固所学。实际开发中，本文对账号和密码的保存方式并不适用，且账号密码容易泄露，不满足密码本身的保密需求。

persistentStorage仅为轻量级储存方式，主要用于保存程序操作过后的进度状态，对于大量的数据内容，还是推荐使用数据库进行储存。

持久化PersistentStorage的相关的内容，华为官方的指南地址：PersistentStorage：持久化存储UI状态

由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

4.定位日期

文字内容基本添加完成，待效果显示视频和截图；
2024-12-1；
1:44；

时间过得好快，没想到弄到凌晨了，调整了登录页的一些内容；
代码调试完成，待视频审核通过；
2024-12-1；
3:58;

2024-12-1；
10:18；