在鸿蒙开发中，我们需要将储存一些变量，这时候需要用到LocalStorage和AppStorage

LocalStorage

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

用法如下：

// 创建LocalStorage实例并初始化数据
let obj: Record<string, string> = {
  'userName': '初始用户',
  'counter': '0'
}
let storage = new LocalStorage(obj);

// 父组件使用@LocalStorageLink建立双向绑定
@Entry(storage)
@Component
struct ParentComponent {
  @LocalStorageLink('userName') userName: string = '';
  @LocalStorageLink('counter') counter: number = 0;

  build() {
    Column({ space: 10 }) {
      Text(`父组件用户: ${this.userName}`).fontSize(20)
      Text(`父组件计数: ${this.counter}`).fontSize(20)
      Button('修改用户名')
        .onClick(() => {
          this.userName = '修改后的父用户';
        })
      Button('计数器+10')
        .onClick(() => {
          this.counter += 10;
        })

      Divider().margin(10)
      ChildComponent()  // 嵌套子组件
    }
  }
}

// 子组件使用@LocalStorageProp建立单向绑定
@Component
struct ChildComponent {
  @LocalStorageProp('userName') userName: string = '';
  @LocalStorageProp('counter') counter: number = 0;

  build() {
    Column({ space: 10 }) {
      Text(`子组件用户: ${this.userName}`).fontColor(Color.Blue)
      Text(`子组件计数: ${this.counter}`).fontColor(Color.Blue)
      Button('重置用户名')
        .onClick(() => {
          this.userName = '子组件重置用户'; // 仅修改本地不会同步到LocalStorage
        })
      Button('计数器+1')
        .onClick(() => {
          this.counter += 1; // 仅修改本地不会同步到LocalStorage
        })
    }
  }
}

在ChildComponent中，使用了@LocalStorageProp，所以修改了子组件时候，父组件不会变化，因为这个时候是单向的，父组件中使用了@LocalStorageLink，这时候修改了父组件的📄时候，子组件ui也会跟着修改的，这个时候是双向的。

AppStorage

AppStorage 是和应用的进程绑定的，由 UI 框架在应用程序启动时创建，为应用程序 UI 状态属性提供中央存储。相当于属于应用级别的状态存储。

用法如下：

// 创建LocalStorage实例并初始化数据

let storage = new LocalStorage(obj);

AppStorage.setOrCreate('prop', 1)

@Entry

@Component

struct ParentComponent {

@StorageProp('prop') propA: number = 0

@StorageLink('prop') propB: number = 0

build() {

Column({ space: 10 }) {

Text(`父组件propA: ${this.propA}` )

Text(`父组件propB: ${this.propB}` )

Button('计数器propA+1')

.onClick(() => {

this.propA++

})

Button('计数器propB+1')

.onClick(() => {

this.propB++

})

Divider().margin(10)

ChildComponent() // 嵌套子组件x

}

}

}

@Component

struct ChildComponent {

@StorageProp('prop') propA: number = 0

@StorageLink('prop') propB: number = 0

build() {

Column({ space: 10 }) {

Text(`子组件propA: ${this.propA}` )

Text(`子组件propB: ${this.propB}` )

Button('计数器+1')

.onClick(() => {

this.propA++

})

Button('计数器propB+1')

.onClick(() => {

this.propB++

})

}

}

}

上面当改变propA的值时候，只是页面上改变，当改变propB时候子组件父组件都改变了。

@StorageProp是单向绑定的，@StorageLink是双向绑定的。

当使用LocalStorage时候，关闭页面时候，再打开时候值恢复原值了。

当使用AppStorage时候，关闭应用时候，再打开之后值又恢复原值了。

那么想要在应用级别上存储值怎么办呢

那就结合持久化存储UI状态PersistentStorage了

PersistentStorage

PersistentStorage将选定的AppStorage属性保留在设备磁盘上。应用程序通过API，以决定哪些属性应借助PersistentStorage持久化。PersistentStorage和AppStorage中的属性建立了双向同步，UI和业务逻辑不直接访问PersistentStorage中的属性，所有属性访问都是对AppStorage的访问，AppStorage中的更改会自动同步到PersistentStorage。

PersistentStorage.persistProp('aProp', 47);

@Entry
@Component
struct TestPageOne {
  @StorageLink('aProp') aProp: number = 48;

  build() {
    Row() {
      Column() {
        Text(this.message)
        // 应用退出时会保存当前结果。重新启动后，会显示上一次的保存结果
        // 未修改时默认值为47
        Text(`${this.aProp}`)
          .onClick(() => {
            this.aProp += 1;
          })
      }
    }
  }
}

上面改变pProp的值后，在启动应用之后，值还是原来的值。但是注意的是，这个在预览的时候不起效果的。只有在模拟器或者真机上才正常。