网站模板对seo的影响吗,电子商务推广网站,哔哩哔哩网页版下载,徐州网络推广公司排名arkUI#xff1a;使用ArkUI实现用户信息的持久化管理与自动填充#xff08;PersistentStorage#xff09; 1 主要内容说明2 例子2.1 登录页2.1.1登陆页的相关说明2.1.1.1 持久化存储的初始化2.1.1.2 输入框2.1.1.3 记住密码选项2.1.1.4 登录按钮的逻辑2.1.1.5 注册跳转 2.1.… arkUI使用ArkUI实现用户信息的持久化管理与自动填充PersistentStorage 1 主要内容说明2 例子2.1 登录页2.1.1登陆页的相关说明2.1.1.1 持久化存储的初始化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 2.2 注册页2.2.1 注册页的相关说明2.2.1.1 功能2.2.1.2 持久化存储2.2.1.3 关键交互 2.2.2 源码2注册页--文件Page_PersistentStorage_Case_Register 2.3 登陆成功的页面2.3.1 登陆成功页面的相关说明2.3.1.1 功能2.3.1.2 持久化存储2.3.1.3 关键交互 2.3.2 源码3登陆成功的页面--文件Page_PersistentStorage_Case_Main 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.结语4.定位日期 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 效果视频 使用ArkUI实现用户信息的持久化管理与自动填充 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
