harmony OS NEXT-UIAbility内状态-LocalStorage详细介绍
原创
harmony OS NEXT-UIAbility内状态-LocalStorage详细介绍
原创
骑老奶奶过马路
发布于 2025-03-30 16:38:29
发布于 2025-03-30 16:38:29
鸿蒙Harmony-UIAbility内状态-LocalStorage详细介绍
1.1 Localstorage的概念
LocalStorage是页面级的UI状态存储，通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例，LocalStorage也可以在UIAbility内，页面间共享状态
1.2 LocalStorage单个页面的使用方法
1.2.1 单个页面的数据状态存储方法
- 准备一个共享数据，键值对的方式存储
- 创建LocalStorage实例：const storage = new LocalStorage({key:value})
- 单向 @LocalStorageProp(‘user’)组件内可变
- 双向 #LocalStorageLink(‘user’)全局均可变
1.2.2 案例演示
- 准备共享数据
const data:Record<string,string> = {
'uname':'公孙离',
'age':'18'
}- 创建一个storage实例
const storage = new LocalStorage(data)- 使用共享数据库
1.@Entry(storage)
//表示我要从共享数据库中取出uname字段 具体需要取出什么字段根据自己需求即可
@LocalStorageLink('uname')
//给取出的字段取一个别名，需要赋初始值。因为可能拿不到
message: string = ''- 具体代码实现
const data:Record<string,string> = {
'uname':'公孙离',
'age':'18'
}
const storage = new LocalStorage(data)
@Entry(storage)
@Component
struct TestLocalStorage03 {
@LocalStorageLink('uname')
message:string = ''
build() {
Column() {
Text(this.message)
Button('改变父组件的信息')
.onClick(()=>{
this.message = '孙尚香'
})
child001()
}
.height('100%')
.width('100%')
}
}
@Component
struct child001 {
@LocalStorageLink('uname')
message:string = ''
build() {
Column(){
Text('-------------------------------------------')
Text(this.message)
Button('改变子组件的状态')
.onClick(()=>{
this.message = '西施'
})
}
}
}1.2.3 效果展示
img
1.3 LocalStorage多个页面共享UIAbility的使用方法
1.3.1 多个页面的使用方法
- 依旧是准备共享数据，放置在设置当前应用的加载页面（UIAbility共享），只要是当前windowstage内的界面，都可以共享这份数据
- 在设置应用的加载页面创建storage实例
- 通过LocalStorage里面的方法getShared获取数据
1.3.2 案例演示
- 准备数据
const data:Record<string,string> = {
'uname':'公孙离',
'age':'18',
}
const storage = new LocalStorage(data)- 创建storage实例，将storage传递给页面
1.const storage = new LocalStorage(data)
2. windowStage.loadContent('pages/10/TestLocalStorage03',storage);- 接收数据
const storage = LocalStorage.getShared()
//其他步骤同单个页面传输吗，这里就不再叙述- 完整代码展示
- UIAbility内代码
onWindowStageCreate(windowStage: window.WindowStage): void {
const data:Record<string,string> = {
'uname':'公孙离',
'age':'18',
}
const storage = new LocalStorage(data)
// //只要是当前windowStage内的界面，都可以共享这份数据
windowStage.loadContent('pages/10/TestLocalStorage03',storage);
}- 页面1
// const data:Record<string,string> = {
import { router } from '@kit.ArkUI'
// 'uname':'公孙离',
// 'age':'18'
// }
const storage = LocalStorage.getShared()
@Entry(storage)
@Component
struct TestLocalStorage03 {
@LocalStorageLink('uname')
message: string = ''
build() {
Column() {
Text(this.message)
Button('改变父组件的信息')
.onClick(() => {
this.message = '孙尚香'
})
child001()
}
.height('100%')
.width('100%')
}
}
@Component
struct child001 {
@LocalStorageLink('uname')
message: string = ''
build() {
Column() {
Text('-------------------------------------------')
Text(this.message)
Button('改变子组件的状态')
.onClick(() => {
this.message = '西施'
})
Button('切换页面')
.onClick(() => {
router.pushUrl({
url: 'pages/10/TextLocalStorage2'
})
})
}
}
}- 页面2
import { router } from '@kit.ArkUI'
const storage = LocalStorage.getShared()
@Entry(storage)
@Component
struct TextLocalStorage2 {
@LocalStorageLink('uname')
message: string = ''
build() {
Column() {
Text(this.message)
Button('改变信息')
.onClick(()=>{
this.message = '刘备'
})
Button('back')
.onClick(()=>{
router.back()
})
}
.height('100%')
.width('100%')
}
}1.3.3 效果展示
img
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
