政府网站建设升级白皮书优化师

鸿蒙Harmony-UIAbility内状态-LocalStorage详细介绍

1.1 Localstorage的概念

LocalStorage是页面级的UI状态存储，通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例，LocalStorage也可以在UIAbility内，页面间共享状态

1.2 LocalStorage单个页面的使用方法

1.2.1 单个页面的数据状态存储方法

1. 准备一个共享数据，键值对的方式存储

2. 创建LocalStorage实例：const storage = new LocalStorage({key:value})

3. 单向 @LocalStorageProp(‘user’)组件内可变

4. 双向 #LocalStorageLink(‘user’)全局均可变

1.2.2 案例演示

1. 准备共享数据

const data:Record<string,string> = {'uname':'公孙离','age':'18'
}

2. 创建一个storage实例

const storage = new LocalStorage(data)

3. 使用共享数据库

1.@Entry(storage)
//表示我要从共享数据库中取出uname字段   具体需要取出什么字段根据自己需求即可@LocalStorageLink('uname')//给取出的字段取一个别名，需要赋初始值。因为可能拿不到message: string = ''

4. 具体代码实现

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 效果展示

1.3 LocalStorage多个页面共享UIAbility的使用方法

1.3.1 多个页面的使用方法

1. 依旧是准备共享数据，放置在设置当前应用的加载页面（UIAbility共享），只要是当前windowstage内的界面，都可以共享这份数据
2. 在设置应用的加载页面创建storage实例
3. 通过LocalStorage里面的方法getShared获取数据

1.3.2 案例演示

1. 准备数据

  const data:Record<string,string> = {'uname':'公孙离','age':'18',}const storage = new LocalStorage(data)

2. 创建storage实例，将storage传递给页面

    1.const storage = new LocalStorage(data)2.  windowStage.loadContent('pages/10/TestLocalStorage03',storage);

3. 接收数据

const storage = LocalStorage.getShared()
//其他步骤同单个页面传输吗，这里就不再叙述

4. 完整代码展示

• 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 效果展示