OpenHarmony ETS AppStorage 图文示例用法

应用开发过程中可能需要全局一个变量，然后变化了也能及时收到通知；这个时候可以考虑使用AppStorage

• AppStorage

  • AppStorage是应用程序中的单例对象，为可变应用程序状态属性提供中央存储， ==类似extern，使状态变量跨文件使用，生命周期：整个进程==
  • 默认情况下，AppStorage中的属性是可变的，AppStorage还可使用不可变（只读）属性
  • 当前接口当前仅可以处理基础类型数据，对于修改object中某一个值尚未支持

1，用法示例

需要的地方 定义一个成员变量用@StorageLink，括号里面是它的key

@StorageLink('key_string') keyString: string = ""

在需要控制它的地方得到这个Link对象

var mStringLink;
mStringLink = AppStorage.SetAndLink("key_string", "s");

改变它的值是

mStringLink.set('改变的值')

2，效果演示

3，更多特性

4，示例代码

import router from '@ohos.router';
import mTestModel from '../TestModel';

@Entry
@Component
struct Index {
  @State message: string = '我是首界面'
  @StorageLink('key_string') keyString: string = ""
  @StorageLink('key_number') keyNumber: number = 0
  @StorageLink('key_boolean') keyBoolean: boolean = false
  private name = "q"



  aboutToAppear() {
    console.log("aboutToAppear...")
    mTestModel.initModel();
  }

  build() {
    Column() {

      Button(`打印日志`).fontSize(24).onClick(() => {
        console.log("我是日志");
      }).margin({ top: 20 })

      Text(this.message)
        .fontSize(30)
        .margin({ top: 20 })
        .fontWeight(FontWeight.Bold)

      Text(this.updateKeyString(this.keyString))
        .fontSize(24)
        .textAlign(TextAlign.Center)

      Text(`${this.keyNumber}`)
        .fontSize(24)
        .textAlign(TextAlign.Center)


      Text(`${this.keyBoolean}`)
        .fontSize(24)
        .textAlign(TextAlign.Center)

      Button(`setLinkString`).fontSize(24).onClick(() => {
        mTestModel.setLinkString()
      }).margin({ top: 20 })

      Button(`add`).fontSize(24).onClick(() => {
        mTestModel.add()
      }).margin({ top: 20 })

      Button(`setLinkBoolean`).fontSize(24).onClick(() => {
        mTestModel.setLinkBoolean()
      }).margin({ top: 20 })

      Button(`go second`).fontSize(24).onClick(() => {
        router.push({ url: 'pages/second' })
      }).margin({ top: 20 })

    }.width('100%')
  }

  private updateKeyString(keyString) {
    console.log("updateKeyString..." + keyString)
    let s = this.name + keyString
    return s;
  }
}

import router from '@ohos.router';
import mTestModel from '../TestModel';

@Entry
@Component
struct Second {
  @State message: string = '我是第二个界面'
  @StorageLink('key_string') keyString: string = ""
  @StorageLink('key_number') keyNumber: number = 0
  @StorageLink('key_boolean') keyBoolean: boolean = false
  private name = "z"

  aboutToAppear() {
    console.log("aboutToAppear...")
    mTestModel.initModel();
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .margin({ top: 20 })
        .fontWeight(FontWeight.Bold)

      Text(this.keyString)
        .fontSize(24)
        .textAlign(TextAlign.Center)

      Text(`${this.keyNumber}`)
        .fontSize(24)
        .textAlign(TextAlign.Center)


      Text(`${this.keyBoolean}`)
        .fontSize(24)
        .textAlign(TextAlign.Center)

      Button(`setLinkString`).fontSize(24).onClick(() => {
        mTestModel.setLinkString()
      }).margin({ top: 20 })

      Button(`add`).fontSize(24).onClick(() => {
        mTestModel.add()
      }).margin({ top: 20 })

      Button(`setLinkBoolean`).fontSize(24).onClick(() => {
        mTestModel.setLinkBoolean()
      }).margin({ top: 20 })


      Button(`back`).fontSize(24).onClick(() => {
        router.back()
      }).margin({ top: 20 })
    }.width('100%')
  }
}

var mStringLink;
var mNumberLink;
var mBooleanLink;

export class TestModel {
    initModel() {
        console.log("initModel...")
        mStringLink = AppStorage.SetAndLink("key_string", "s");
        mNumberLink = AppStorage.SetAndLink("key_number", 0);
        mBooleanLink = AppStorage.SetAndLink("key_boolean", false);
    }

    setLinkString() {
        let temp = mStringLink.get()
        console.log("mNumberLink:" + temp)
        mStringLink.set(temp + 's')
    }

    setLinkBoolean() {
        let temp = mBooleanLink.get()
        console.log("mBooleanLink:" + temp)
        mBooleanLink.set(!temp)
    }

    add() {
        let temp = mNumberLink.get()
        console.log("mNumberLink:" + temp)
        mNumberLink.set(++temp)
    }
}


let mTestModel = new TestModel();

export default mTestModel as TestModel;