harmony OS NEXT-UIAbility内状态-LocalStorage详细介绍

# 鸿蒙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. 准备共享数据

```ts
const data:Record = {
'uname':'公孙离',
'age':'18'
}

```

2. 创建一个storage实例

```ts
const storage = new LocalStorage(data)
```

3. 使用共享数据库

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

4. 具体代码实现

```ts
const data:Record = {
'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. 准备数据

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

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

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

3. 接收数据

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

4. 完整代码展示

* UIAbility内代码

```ts
onWindowStageCreate(windowStage: window.WindowStage): void {
const data:Record = {
'uname':'公孙离',
'age':'18',
}
const storage = new LocalStorage(data)
// //只要是当前windowStage内的界面，都可以共享这份数据
windowStage.loadContent('pages/10/TestLocalStorage03',storage);
}
```

* 页面1

```ts
// const data:Record = {
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

```ts
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%')
}
}
```

审核编辑 黄宇