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

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