HarmonyOS-LocalStorage/AppStorage/PersistentStorage的基本用法（案例）

一、LocalStorage

LocalStorage是ArkTS为构建页面级别状态变量提供存储的内存内“数据库”。

（1）特点

1.LocalStorage实例可以在 "页面（一个页面）内" 共享

2.LocalStorage中的所有属性都是可变的

3.@LocalStorageProp：@LocalStorageProp装饰的变量和与LocalStorage中给定属性建立 单向同步关系。状态变量修改不同步更新。

@LocalStorageLink：@LocalStorageLink装饰的变量和在@Component中创建与LocalStorage中给定属性建立 双向同步关系。状态变量修改同步更新。

4.类型必须被指定，且必须和LocalStorage中对应属性相同。不支持any，不允许使用undefined和null。

（2）用法

1.创建新实例并使用给定对象初始化：

     let storage = new LocalStorage({ 'PropA': 47 });

2.注入实例：

    @Entry(storage)

3. @LocalStorageLink变量装饰器声明新变量storLink1与LocalStorage中的'PropA'属性建立双向绑定：

    @LocalStorageLink('PropA') storLink1: number = 1;

（3）案例

// 创建新实例并使用给定对象初始化
let storage = new LocalStorage({ 'PropA': 47 });

@Entry(storage) // 使LocalStorage可从@Component组件访问---注入实例
@Component
struct LocalStoragePage {
  // @LocalStorageLink变量装饰器声明新变量storLink1与LocalStorage中的'PropA'属性建立双向绑定
  @LocalStorageLink('PropA') storLink1: number = 1;

  build() {

    Column() {
      Text('-------LocalStorage-------').fontColor(Color.Red).fontSize(24)
      Text(`storLink1: ${this.storLink1}`).fontSize(20).fontWeight(600)
        .onClick(() => {
          this.storLink1++;
        })
      Button('修改')
        .onClick(() => {
          storage.set('PropA', 100)
        })
      ComA()
    }
    .width('100%').padding(20).justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)

  }
}

@Component
struct ComA {
  build() {
    Column() {
      Text(`ComA`)
      ComB()
    }.justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)
  }
}

@Component
struct ComB {
  @LocalStorageLink('PropA') storLink2: number = 1; //双向
  @LocalStorageProp('PropA') storLink3: number = 1; //单向

  build() {
    Column() {
      Text(`ComB_link: ${this.storLink2}`)
        .onClick(() => {
          this.storLink2 += 10
        })
      Text(`ComB_prop: ${this.storLink3}`)
        .onClick(() => {
          this.storLink3 += 10
        })
    }
  }
}

二、AppStorage

（1）特点

1.AppStorage是应用级的全局状态共享

2.@StorageProp：单向同步：从AppStorage的对应属性到组件的状态变量。组件本地的修改是允许的，但是AppStorage中给定的属性一旦发生变化，将覆盖本地的修改。

   @StorageLink：双向同步：从AppStorage的对应属性到自定义组件，从自定义组件到AppStorage对应属性。

3.类型必须被指定，且必须和LocalStorage中对应属性相同。不支持any，不允许使用undefined和null。

（2）用法

1.创建新实例并使用给定对象初始化：

     AppStorage.SetOrCreate('PropA', 48);

2.注入实例：

    @Entry(storage)

3. @StorageLink变量装饰器声明新变量appLink1与AppStorage中的'PropA'属性建立双向绑定：

    @StorageLink('PropA') appLink1: number = 1;

（3）案例

import router from '@ohos.router';
// 全局
AppStorage.SetOrCreate('PropA', 48);

@Entry(storage) // 使LocalStorage可从@Component组件访问---注入实例
@Component
struct LocalStoragePage {
  @StorageLink('PropA') appLink1: number = 1;

  build() {

    Column() {
      Text('-------appStorage-------').fontColor(Color.Red).fontSize(24)
      Text(`storLink1: ${this.appLink1}`).fontSize(20).fontWeight(600)
        .onClick(() => {
          this.appLink1++;
        })
      Button('修改')
        .onClick(() => {
          AppStorage.SetOrCreate('PropA', 100)
        })
      Button('跳转')
        .onClick(() => {
          router.pushUrl({ url: 'pages/Index' })
        })
    
    }
    .width('100%').padding(20).justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)

  }
}

pages/Index页面：

//导入页面路由模块
import router from '@ohos.router';

@Entry
@Component
struct Index {
  // 全局
  @StorageLink('PropA') propa: number = 1;

  build() {
   
      Column() {
        Text(`appStorage: ${this.propa}`)
          .onClick(() => {
            this.propa++
          })
        Button('返回').onClick(()=>{
          router.back();
        }) 

      }
      .width('100%')
  
  }
}

三、PersistentStorage

（1）特点

1.UI和业务逻辑不直接访问PersistentStorage中的属性，所有属性访问都是对AppStorage的访问，AppStorage中的更改会自动同步到PersistentStorage

2.PersistentStorage和AppStorage中的属性建立双向同步

3.限制条件：不支持嵌套对象（对象数组，对象的属性是对象等）；不支持undefined 和 null 

4.PersistentStorage的持久化变量最好是小于2kb的数据

5.PersistentStorage只能在UI页面内使用，否则将无法持久化数据

（2）用法

1.初始化PersistentStorage属性,此时AppStorage中也生成一个Address属性

       PersistentStorage.PersistProp('Address', "");

2.在AppStorage获取对应属性

       AppStorage.Get('aProp');

或在组件内部定义：

       @StorageLink('Address') address: string = "";

（3）案例

PersistentStorage.PersistProp('aProp', 47);

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @StorageLink('aProp') aProp: number = 48

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