鸿蒙NEXT开发实战系列| 第18篇 | 进阶篇 适合人群有鸿蒙基础状态管理经验的开发者 ⏰阅读时间约12分钟 | 开发环境DevEco Studio 5.0上一篇DevEco Studio必备工具清单 | 下一篇待更新目录一、引言三个Storage到底该怎么选二、三种Storage全景对比三、AppStorage应用级全局状态管理四、LocalStorage页面级私有状态管理五、PersistentStorage持久化存储六、方案选型决策树七、综合实战用户设置页面八、常见误区与最佳实践九、总结一、引言三个Storage到底该怎么选在鸿蒙NEXT开发中当你的应用规模逐渐增大组件之间的状态共享需求会越来越多。这时你会发现除了State、Link、Provide/Consume这些组件级状态装饰器之外还有三个以 Storage 命名的方案AppStorage-- 应用级状态存储LocalStorage-- 页面级状态存储PersistentStorage-- 持久化存储很多开发者在第一次接触时都会感到困惑它们看起来都能存数据到底有什么区别什么时候该用哪个本文将通过对比表格 选型决策树 完整实战代码帮你彻底理清这三种存储方案的定位和用法。二、三种Storage全景对比先上一张对比表帮你建立全局认知对比维度AppStorageLocalStoragePersistentStorage作用域整个应用进程单个页面/组件树整个应用进程生命周期应用存活期间退出即清除页面存活期间页面销毁即清除永久保存重启应用后仍然存在数据持久化否内存级否内存级是写入磁盘典型用途用户登录态、全局主题、语言设置弹窗状态、页面内部配置用户设置偏好、历史记录UI联动装饰器StorageProp/StorageLinkLocalStorageProp/LocalStorageLink配合StorageProp/StorageLink使用数据共享范围任意页面和组件当前页面及其子组件任意页面和组件API来源ohos.app.ets.AppStorage构造函数传入ohos.app.ets.PersistentStorage一句话总结AppStorage 应用级别的全局变量所有页面共享应用退出就没了LocalStorage 页面级别的私有变量只在当前页面及其子组件中有效PersistentStorage 会写入磁盘的全局变量应用重启数据还在三、AppStorage应用级全局状态管理3.1 核心概念AppStorage是鸿蒙提供的应用级状态存储它在整个应用进程的生命周期内维护一个键值对存储。所有页面和组件都可以通过StorageProp或StorageLink装饰器与之建立双向或单向的数据绑定。适用场景用户登录信息token、用户昵称全局主题模式深色/浅色全局语言设置全局配置参数3.2 基础用法StorageLink 和 StorageProp// EntryAbility.ets 中初始化AppStorage可选也可在页面中直接使用 import { AppStorage } from kit.ArkUI; // 在应用启动时设置初始值 AppStorage.setOrCreatestring(appTheme, light); AppStorage.setOrCreatestring(userName, 游客); AppStorage.setOrCreateboolean(isLoggedIn, false);// pages/SettingsPage.ets Entry Component struct SettingsPage { // StorageLink双向绑定页面修改会同步回AppStorage StorageLink(appTheme) appTheme: string light; // StorageProp单向绑定只从AppStorage读取页面修改不会回写 StorageProp(userName) userName: string 游客; build() { Column() { // 显示当前用户 Text(当前用户${this.userName}) .fontSize(20) .margin({ bottom: 20 }) // 主题切换按钮 Row() { Button(浅色模式) .backgroundColor(this.appTheme light ? #1890FF : #E0E0E0) .onClick(() { this.appTheme light; // 双向绑定AppStorage同步更新 }) .margin({ right: 10 }) Button(深色模式) .backgroundColor(this.appTheme dark ? #1890FF : #E0E0E0) .onClick(() { this.appTheme dark; }) } // 主题预览区域 Text(当前主题${this.appTheme light ? 浅色 : 深色}) .fontSize(16) .margin({ top: 20 }) .padding(20) .borderRadius(12) .backgroundColor(this.appTheme light ? #FFFFFF : #333333) .fontColor(this.appTheme light ? #333333 : #FFFFFF) } .width(100%) .height(100%) .padding(20) .justifyContent(FlexAlign.Center) } }// pages/ProfilePage.ets -- 另一个页面共享同一份AppStorage数据 Entry Component struct ProfilePage { // 从AppStorage读取同一个key自动同步 StorageLink(appTheme) appTheme: string light; StorageProp(userName) userName: string 游客; StorageProp(isLoggedIn) isLoggedIn: boolean false; build() { Column() { Text(用户${this.userName}) .fontSize(24) .fontWeight(FontWeight.Bold) Text(状态${this.isLoggedIn ? 已登录 : 未登录}) .fontSize(16) .margin({ top: 8 }) Text(主题${this.appTheme light ? 浅色 : 深色}) .fontSize(16) .margin({ top: 8 }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .backgroundColor(this.appTheme light ? #F5F5F5 : #1A1A1A) } }3.3 StorageLink vs StorageProp对比项StorageLinkStorageProp绑定方向双向绑定单向绑定只读页面修改是否回写是同步回AppStorage否仅修改本地副本适用场景需要从页面修改并同步的场景只读展示不需要回写的场景3.4 在子组件中访问AppStorage// 子组件中也可以直接使用StorageLink/StorageProp Component struct ThemeCard { StorageLink(appTheme) currentTheme: string light; build() { Column() { Text(主题卡片组件) .fontSize(16) .fontColor(this.currentTheme light ? #333 : #FFF) Button(切换主题) .onClick(() { this.currentTheme this.currentTheme light ? dark : light; }) } .padding(16) .borderRadius(12) .backgroundColor(this.currentTheme light ? #FFF : #444) } }四、LocalStorage页面级私有状态管理4.1 核心概念LocalStorage是页面级的状态存储它的作用域仅限于创建它的页面及其子组件树。当页面被销毁时LocalStorage 中的数据也会随之清除。适用场景页面内部多个组件共享的状态如弹窗显隐、筛选条件模态框的参数传递页面内部的配置数据如列表排序方式4.2 基础用法创建和注入// pages/ProductFilterPage.ets // 1. 定义LocalStorage的初始数据 const productFilterStorage new LocalStorage({ filterCategory: 全部, sortBy: 销量, priceRange: 0-1000, isShowFilter: false }); // 2. 使用Entry和LocalStorageLink获取页面的LocalStorage实例 Entry(productFilterStorage) // 将LocalStorage注入到页面 Component struct ProductFilterPage { // 3. 使用LocalStorageLink双向绑定 LocalStorageLink(filterCategory) filterCategory: string 全部; LocalStorageLink(sortBy) sortBy: string 销量; LocalStorageLink(isShowFilter) isShowFilter: boolean false; build() { Column() { // 顶部筛选栏 Row() { Text(分类${this.filterCategory}) .fontSize(14) .fontColor(#666) .padding(8) .backgroundColor(#F0F0F0) .borderRadius(16) .margin({ right: 8 }) Text(排序${this.sortBy}) .fontSize(14) .fontColor(#666) .padding(8) .backgroundColor(#F0F0F0) .borderRadius(16) Blank() Button(筛选) .fontSize(14) .height(32) .onClick(() { this.isShowFilter !this.isShowFilter; }) } .width(100%) .padding(12) // 商品列表区域 List({ space: 8 }) { ForEach([商品A, 商品B, 商品C, 商品D], (item: string) { ListItem() { Text(item) .fontSize(16) .width(100%) .padding(16) .backgroundColor(Color.White) .borderRadius(8) } }) } .layoutWeight(1) .padding({ left: 12, right: 12 }) // 条件渲染筛选面板使用LocalStorage的状态控制 if (this.isShowFilter) { FilterPanel() } } .width(100%) .height(100%) .backgroundColor(#F5F5F5) } } // 4. 子组件通过构造函数传入LocalStorage实例 Component struct FilterPanel { // 在子组件中使用LocalStorageLink LocalStorageLink(filterCategory) filterCategory: string 全部; LocalStorageLink(sortBy) sortBy: string 销量; LocalStorageLink(isShowFilter) isShowFilter: boolean false; private categories: string[] [全部, 手机, 电脑, 服饰, 家居]; private sortOptions: string[] [销量, 价格升序, 价格降序, 最新]; build() { Column() { // 标题 Row() { Text(筛选条件) .fontSize(18) .fontWeight(FontWeight.Bold) Blank() Text(关闭) .fontSize(14) .fontColor(#FF4D4F) .onClick(() { this.isShowFilter false; }) } .width(100%) .padding({ bottom: 12 }) // 分类选择 Text(商品分类) .fontSize(14) .fontColor(#666) .margin({ bottom: 8 }) Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.categories, (item: string) { Text(item) .fontSize(14) .padding({ left: 16, right: 16, top: 8, bottom: 8 }) .backgroundColor(this.filterCategory item ? #1890FF : #F0F0F0) .fontColor(this.filterCategory item ? #FFF : #333) .borderRadius(16) .margin({ right: 8, bottom: 8 }) .onClick(() { this.filterCategory item; }) }) } // 排序选择 Text(排序方式) .fontSize(14) .fontColor(#666) .margin({ top: 12, bottom: 8 }) Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.sortOptions, (item: string) { Text(item) .fontSize(14) .padding({ left: 16, right: 16, top: 8, bottom: 8 }) .backgroundColor(this.sortBy item ? #1890FF : #F0F0F0) .fontColor(this.sortBy item ? #FFF : #333) .borderRadius(16) .margin({ right: 8, bottom: 8 }) .onClick(() { this.sortBy item; }) }) } } .width(100%) .padding(16) .backgroundColor(Color.White) .borderRadius({ topLeft: 16, topRight: 16 }) .shadow({ radius: 8, color: #1A000000, offsetY: -4 }) } }4.3 AppStorage vs LocalStorage 核心区别对比维度AppStorageLocalStorage数据存储位置应用进程级内存页面实例级内存页面间共享可以任意页面访问同一个key不可以仅限当前页面初始化方式AppStorage.setOrCreate()new LocalStorage({...})注入方式自动全局可访问Entry(storage)或通过构造函数典型场景用户信息、主题、语言页面内筛选条件、弹窗状态五、PersistentStorage持久化存储5.1 核心概念PersistentStorage的核心能力是将AppStorage中的指定key持久化到磁盘。应用退出后再次启动这些数据会自动恢复到AppStorage中。它本质上是AppStorage的持久化增强层而不是一个独立的存储系统。适用场景用户的主题偏好设置深色/浅色模式用户的语言选择上次阅读位置免登录token5.2 基础用法// EntryAbility.ets 或 Index.ets 中初始化必须在UI加载之前调用 import { PersistentStorage, AppStorage } from kit.ArkUI; // 将指定key持久化 -- 必须在Entry组件创建之前调用 PersistentStorage.persistProp(appTheme, light); // 持久化主题设置 PersistentStorage.persistProp(language, zh-CN); // 持久化语言设置 PersistentStorage.persistProp(fontSize, 16); // 持久化字体大小 PersistentStorage.persistProp(isFirstLaunch, true); // 持久化首次启动标记 // 此时AppStorage中已经自动包含了这些持久化数据 // 应用重启后这些值会从磁盘自动恢复// pages/UserPreferences.ets Entry Component struct UserPreferences { // 持久化的数据应用重启后自动恢复 StorageLink(appTheme) appTheme: string light; StorageLink(language) language: string zh-CN; StorageLink(fontSize) fontSize: number 16; build() { Column() { Text(用户偏好设置) .fontSize(24) .fontWeight(FontWeight.Bold) .margin({ bottom: 30 }) // 主题设置 this.SettingRow(深色模式, this.appTheme dark, (value: boolean) { this.appTheme value ? dark : light; }) // 语言设置 this.SettingRow(English, this.language en-US, (value: boolean) { this.language value ? en-US : zh-CN; }) // 字体大小设置 Column() { Text(字体大小${this.fontSize}sp) .fontSize(16) .margin({ bottom: 10 }) Row() { Button(A-) .fontSize(14) .width(50) .onClick(() { if (this.fontSize 12) { this.fontSize - 2; } }) Slider({ value: this.fontSize, min: 12, max: 24, step: 2 }) .layoutWeight(1) .margin({ left: 10, right: 10 }) .onChange((value: number) { this.fontSize value; }) Button(A) .fontSize(18) .width(50) .onClick(() { if (this.fontSize 24) { this.fontSize 2; } }) } .width(100%) } .width(100%) .padding(16) .backgroundColor(Color.White) .borderRadius(12) .margin({ top: 20 }) // 提示信息 Text(以上设置会在应用重启后自动恢复) .fontSize(12) .fontColor(#999) .margin({ top: 20 }) } .width(100%) .height(100%) .padding(20) .backgroundColor(this.appTheme dark ? #1A1A1A : #F5F5F5) } Builder SettingRow(label: string, value: boolean, onChange: (value: boolean) void) { Row() { Text(label) .fontSize(16) .fontColor(this.appTheme dark ? #FFF : #333) Blank() Toggle({ type: ToggleType.Switch, isOn: value }) .onChange(onChange) } .width(100%) .padding(16) .backgroundColor(this.appTheme dark ? #333 : Color.White) .borderRadius(12) .margin({ bottom: 8 }) } }5.3 PersistentStorage 工作原理应用首次启动 | v PersistentStorage.persistProp(theme, light) -- 初始化默认值 | v AppStorage.setOrCreate(theme, light) -- 自动写入AppStorage | v 页面通过StorageLink(theme) 读取 -- UI显示 light | v 用户修改为 dark -- AppStorage更新为dark | v PersistentStorage 自动同步到磁盘 -- 磁盘存储 dark | v 应用退出后重新启动 | v PersistentStorage 从磁盘读取 dark -- 恢复到AppStorage | v 页面通过StorageLink(theme) 读取 -- UI显示 dark已恢复六、方案选型决策树当你需要选择存储方案时可以按照以下决策流程来判断需要存储数据 | -- 数据是否需要在应用重启后保留 | | | -- 是 -- 使用 PersistentStorage持久化到磁盘 | | 适用用户设置、主题偏好、免登录token | | | -- 否 -- 数据需要跨页面共享吗 | | | -- 是 -- 使用 AppStorage应用级内存 | | 适用登录态、全局配置、实时数据 | | | -- 否 -- 使用 LocalStorage页面级内存 | 适用弹窗状态、页面内筛选条件更直观的判断方法你的需求推荐方案用户关闭App再打开设置还在PersistentStorage所有页面都要显示用户名AppStorage点击按钮打开弹窗弹窗内选完条件后列表刷新LocalStorage全局深色模式切换所有页面生效PersistentStorage持久化 AppStorage运行时当前页面的排序方式和筛选条件LocalStorage登录token下次打开App免登录PersistentStorage七、综合实战用户设置页面下面通过一个完整的实战案例展示三种Storage的配合使用。7.1 需求分析用户的主题偏好深色/浅色-- 需要持久化 -- PersistentStorage用户的登录信息昵称、头像-- 跨页面共享 -- AppStorage设置页的弹窗显隐状态 -- 页面私有 -- LocalStorage7.2 完整代码// EntryAbility.ets -- 应用入口初始化持久化数据 import { PersistentStorage } from kit.ArkUI; import { AbilityConstant, UIAbility, Want } from kit.AbilityKit; import { hilog } from kit.PerformanceAnalysisKit; import { window } from kit.ArkUI; export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { // 在Ability onCreate中初始化持久化 PersistentStorage.persistProp(userTheme, light); PersistentStorage.persistProp(fontSize, 16); } onWindowStageCreate(windowStage: window.WindowStage): void { windowStage.loadContent(pages/Index, (err) { if (err.code) { hilog.error(0x0000, testTag, Failed to load the content.); return; } hilog.info(0x0000, testTag, Succeeded in loading the content.); }); } }// pages/UserSettings.ets // 本地存储页面级状态 const settingsPageStorage new LocalStorage({ showLogoutDialog: false, showAboutDialog: false }); Entry(settingsPageStorage) Component struct UserSettings { // PersistentStorage持久化的数据跨应用重启保留 StorageLink(userTheme) userTheme: string light; StorageLink(fontSize) fontSize: number 16; // AppStorage的应用级数据跨页面共享不持久化 StorageLink(isLoggedIn) isLoggedIn: boolean false; StorageLink(userName) userName: string 游客; StorageLink(userAvatar) userAvatar: string ; // LocalStorage的页面级数据仅本页面使用 LocalStorageLink(showLogoutDialog) showLogoutDialog: boolean false; LocalStorageLink(showAboutDialog) showAboutDialog: boolean false; build() { Column() { // 顶部标题 Text(设置) .fontSize(24) .fontWeight(FontWeight.Bold) .width(100%) .padding({ top: 16, bottom: 20, left: 16 }) Scroll() { Column({ space: 12 }) { // 用户信息卡片 this.UserInfoCard() // 主题设置持久化 this.ThemeSettings() // 字体设置持久化 this.FontSettings() // 账号操作页面级弹窗控制 this.AccountActions() // 关于页面级弹窗控制 this.AboutSection() } .padding({ left: 16, right: 16, bottom: 40 }) } .layoutWeight(1) } .width(100%) .height(100%) .backgroundColor(this.userTheme dark ? #1A1A1A : #F5F5F5) } // 用户信息卡片 -- 使用AppStorage数据 Builder UserInfoCard() { Row() { // 头像 Circle({ width: 60, height: 60 }) .fill(this.userTheme dark ? #555 : #E6F7FF) .overlay( Text(this.isLoggedIn ? this.userName.charAt(0) : ?) .fontSize(24) .fontColor(this.userTheme dark ? #FFF : #1890FF) ) Column() { Text(this.isLoggedIn ? this.userName : 点击登录) .fontSize(18) .fontWeight(FontWeight.Medium) .fontColor(this.userTheme dark ? #FFF : #333) if (this.isLoggedIn) { Text(查看个人主页 ) .fontSize(13) .fontColor(#999) .margin({ top: 4 }) } } .alignItems(HorizontalAlign.Start) .margin({ left: 16 }) Blank() } .width(100%) .padding(16) .backgroundColor(this.userTheme dark ? #333 : Color.White) .borderRadius(12) .onClick(() { if (!this.isLoggedIn) { // 模拟登录 this.isLoggedIn true; this.userName 鸿蒙开发者; } }) } // 主题设置 -- 使用PersistentStorage数据 Builder ThemeSettings() { Column() { Text(显示设置) .fontSize(14) .fontColor(#999) .margin({ bottom: 8 }) // 深色模式 Row() { Text(深色模式) .fontSize(16) .fontColor(this.userTheme dark ? #FFF : #333) Blank() Toggle({ type: ToggleType.Switch, isOn: this.userTheme dark }) .onChange((isOn: boolean) { this.userTheme isOn ? dark : light; }) } .width(100%) .padding(16) .backgroundColor(this.userTheme dark ? #333 : Color.White) .borderRadius(12) } } // 字体设置 -- 使用PersistentStorage数据 Builder FontSettings() { Column() { Text(阅读设置) .fontSize(14) .fontColor(#999) .margin({ bottom: 8 }) Row() { Text(字体大小) .fontSize(16) .fontColor(this.userTheme dark ? #FFF : #333) Blank() Row({ space: 12 }) { Button(-) .width(36) .height(36) .fontSize(18) .onClick(() { if (this.fontSize 12) { this.fontSize - 2; } }) Text(${this.fontSize}sp) .fontSize(16) .fontColor(this.userTheme dark ? #FFF : #333) .width(50) .textAlign(TextAlign.Center) Button() .width(36) .height(36) .fontSize(18) .onClick(() { if (this.fontSize 24) { this.fontSize 2; } }) } } .width(100%) .padding(16) .backgroundColor(this.userTheme dark ? #333 : Color.White) .borderRadius(12) } } // 账号操作 -- 使用LocalStorage控制弹窗 Builder AccountActions() { Column() { Text(账号管理) .fontSize(14) .fontColor(#999) .margin({ bottom: 8 }) if (this.isLoggedIn) { Row() { Text(退出登录) .fontSize(16) .fontColor(#FF4D4F) } .width(100%) .padding(16) .backgroundColor(this.userTheme dark ? #333 : Color.White) .borderRadius(12) .justifyContent(FlexAlign.Center) .onClick(() { this.showLogoutDialog true; // LocalStorage控制弹窗 }) } } // 退出登录确认弹窗 if (this.showLogoutDialog) { this.ConfirmDialog(确认退出登录, () { this.isLoggedIn false; this.userName 游客; this.showLogoutDialog false; }, () { this.showLogoutDialog false; }) } } // 关于信息 -- 使用LocalStorage控制弹窗 Builder AboutSection() { Column() { Text(关于) .fontSize(14) .fontColor(#999) .margin({ bottom: 8 }) Row() { Text(关于应用) .fontSize(16) .fontColor(this.userTheme dark ? #FFF : #333) Blank() Text(v1.0.0) .fontSize(14) .fontColor(#999) } .width(100%) .padding(16) .backgroundColor(this.userTheme dark ? #333 : Color.White) .borderRadius(12) .onClick(() { this.showAboutDialog true; // LocalStorage控制弹窗 }) } if (this.showAboutDialog) { this.ConfirmDialog(鸿蒙NEXT示例应用 v1.0.0, () { this.showAboutDialog false; }, () { this.showAboutDialog false; }) } } // 通用确认弹窗 Builder ConfirmDialog(message: string, onConfirm: () void, onCancel: () void) { Column() { Text(message) .fontSize(16) .fontColor(this.userTheme dark ? #FFF : #333) .margin({ bottom: 20 }) Row({ space: 12 }) { Button(取消) .fontSize(14) .backgroundColor(#F0F0F0) .fontColor(#666) .onClick(onCancel) Button(确认) .fontSize(14) .backgroundColor(#1890FF) .onClick(onConfirm) } } .width(80%) .padding(24) .backgroundColor(this.userTheme dark ? #444 : Color.White) .borderRadius(16) .justifyContent(FlexAlign.Center) } }八、常见误区与最佳实践8.1 常见误区误区1把所有状态都放AppStorage// 错误把页面私有的临时状态放入AppStorage AppStorage.setOrCreate(isShowDialog, false); // 弹窗显隐是页面级的 AppStorage.setOrCreate(selectedTabIndex, 0); // Tab索引是页面级的 AppStorage.setOrCreate(inputText, ); // 输入框内容是页面级的 // 正确只有真正需要跨页面共享的数据才放AppStorage AppStorage.setOrCreate(userName, 张三); // 用户信息多页面需要 AppStorage.setOrCreate(userTheme, light); // 主题设置全局生效误区2PersistentStorage存储大量数据// 错误把大量数据塞进PersistentStorage PersistentStorage.persistProp(productList, JSON.stringify(largeArray)); // 不要这样 // 正确PersistentStorage只适合存储少量配置数据 PersistentStorage.persistProp(appTheme, light); // 简单值 PersistentStorage.persistProp(fontSize, 16); // 简单值 PersistentStorage.persistProp(lastPage, home); // 简单值 // 大量数据使用关系型数据库RDB或Preferences误区3混淆LocalStorage和AppStorage的作用域// 错误以为LocalStorage的数据能在其他页面访问 // PageA.ets const storageA new LocalStorage({ sharedData: value }); Entry(storageA) Component struct PageA { LocalStorageLink(sharedData) data: string ; // ... } // PageB.ets -- 访问不到PageA的LocalStorage // LocalStorageLink(sharedData) data: string ; // 这里是独立的不是PageA的数据 // 正确跨页面共享数据使用AppStorage // PageA.ets StorageLink(sharedData) data: string ; // PageB.ets StorageLink(sharedData) data: string ; // 可以访问同一份数据误区4PersistentStorage调用时机错误// 错误在页面组件内部调用persistProp Entry Component struct MyPage { aboutToAppear() { // 不要在这里调用时机太晚可能导致数据不同步 PersistentStorage.persistProp(theme, light); } } // 正确在Ability的onCreate或页面构建之前调用 // EntryAbility.ets onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { PersistentStorage.persistProp(theme, light); }8.2 最佳实践实践1封装StorageKey常量类// common/StorageKeys.ets /** * AppStorage键名常量避免硬编码字符串导致拼写错误 */ export class StorageKeys { // 用户相关 static readonly USER_NAME userName; static readonly IS_LOGGED_IN isLoggedIn; static readonly USER_TOKEN userToken; // 全局配置 static readonly APP_THEME appTheme; static readonly LANGUAGE language; static readonly FONT_SIZE fontSize; // 首次启动 static readonly IS_FIRST_LAUNCH isFirstLaunch; }// 使用常量类避免拼写错误 StorageLink(StorageKeys.APP_THEME) appTheme: string light; StorageProp(StorageKeys.USER_NAME) userName: string ;实践2类型安全的Storage访问// 封装类型安全的Storage工具类 class StorageHelper { // 安全获取AppStorage中的值 static getT(key: string, defaultValue: T): T { const value AppStorage.getT(key); return value ! undefined ? value : defaultValue; } // 安全设置AppStorage中的值 static setT(key: string, value: T): void { AppStorage.setOrCreateT(key, value); } // 检查key是否存在 static has(key: string): boolean { return AppStorage.has(key); } } // 使用示例 const theme StorageHelper.getstring(appTheme, light); StorageHelper.setboolean(isLoggedIn, true);实践3LocalStorage的组件间传递// 父组件创建LocalStorage并传递给子组件 Entry Component struct ParentPage { private pageStorage new LocalStorage({ selectedId: 0, searchText: }); build() { Column() { // 方式1通过构造函数传递LocalStorage给子组件 ChildComponent({ storage: this.pageStorage }) } } } Component struct ChildComponent { // 通过构造函数接收LocalStorage storage: LocalStorage new LocalStorage(); // 通过传入的LocalStorage进行数据绑定 LocalStorageLink(selectedId) selectedId: number 0; build() { Text(选中ID${this.selectedId}) .onClick(() { this.selectedId; }) } }九、总结本文要点回顾知识点核心内容AppStorage应用级内存存储所有页面共享进程退出数据清除LocalStorage页面级内存存储当前页面及其子组件可用页面销毁数据清除PersistentStorageAppStorage的持久化增强层将指定key写入磁盘应用重启数据恢复选型决策需持久化用PersistentStorage跨页面用AppStorage页面私有用LocalStorage选型速查表场景推荐方案用户主题/语言偏好PersistentStorage登录态/用户信息AppStorage免登录TokenPersistentStorage全局配置参数AppStorage页面内弹窗显隐LocalStorage页面内筛选条件LocalStorage大量结构化数据关系型数据库RDB轻量配置键值对Preferences系列文章推荐第1篇鸿蒙NEXT开发从零到一第2篇ArkUI组件库完全指南第3篇状态管理一文通第4篇数据持久化与网络请求全攻略第5篇性能优化实战指南第8篇鸿蒙NEXT开发环境搭建全攻略第9篇ArkTS语法速成第10篇鸿蒙面试题TOP30第11篇ArkUI组件库完全指南第12篇鸿蒙布局终极指南第13篇ArkUI高级布局技巧第14篇ArkUI电商首页实战第15篇DevEco Studio必备工具清单第18篇AppStorage和LocalStorage选型指南当前如果这篇文章对你有帮助请点赞、收藏、关注支持你的支持是我持续创作的动力有问题欢迎在评论区讨论我会及时回复标签AppStorage | LocalStorage | PersistentStorage | 鸿蒙存储 | 状态管理 | HarmonyOS NEXT | ArkUI | ArkTS | DevEco Studio | 持久化存储 | 全局状态