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

 

审核编辑 黄宇