OpenHarmony頁面級UI狀態儲存：LocalStorage

let para: Record<string,number> = { 'PropA': 47 };
let storage: LocalStorage = new LocalStorage(para); // 建立新例項並使用給定物件初始化
let propA: number | undefined = storage.get('PropA') // propA == 47
let link1: SubscribedAbstractProperty<number> = storage.link('PropA'); // link1.get() == 47
let link2: SubscribedAbstractProperty<number> = storage.link('PropA'); // link2.get() == 47
let prop: SubscribedAbstractProperty<number> = storage.prop('PropA'); // prop.get() = 47
link1.set(48); // two-way sync: link1.get() == link2.get() == prop.get() == 48
prop.set(1); // one-way sync: prop.get()=1; but link1.get() == link2.get() == 48
link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49

// 建立新例項並使用給定物件初始化
let para:Record<string,number> = { 'PropA': 47 };
let storage: LocalStorage = new LocalStorage(para);
@Component
struct Child {
  // @LocalStorageLink變數裝飾器與LocalStorage中的'PropA'屬性建立雙向繫結
  @LocalStorageLink('PropA') storLink2: number = 1;
  build() {
    Button(`Child from LocalStorage ${this.storLink2}`)
      // 更改將同步至LocalStorage中的'PropA'以及Parent.storLink1
      .onClick(() => this.storLink2 += 1)
  }
}
// 使LocalStorage可從@Component元件訪問
@Entry(storage)
@Component
struct CompA {
  // @LocalStorageLink變數裝飾器與LocalStorage中的'PropA'屬性建立雙向繫結
  @LocalStorageLink('PropA') storLink1: number = 1;
  build() {
    Column({ space: 15 }) {
      Button(`Parent from LocalStorage ${this.storLink1}`) // initial value from LocalStorage will be 47, because 'PropA' initialized already
        .onClick(() => this.storLink1 += 1)
      // @Component子元件自動獲得對CompA LocalStorage例項的訪問許可權。
      Child()
    }
  }
}

// 建立新例項並使用給定物件初始化
let para:Record<string,number> = { 'PropA': 47 };
let storage: LocalStorage = new LocalStorage(para);
// 使LocalStorage可從@Component元件訪問
@Entry(storage)
@Component
struct CompA {
  // @LocalStorageProp變數裝飾器與LocalStorage中的'PropA'屬性建立單向繫結
  @LocalStorageProp('PropA') storProp1: number = 1;
  build() {
    Column({ space: 15 }) {
      // 點選後從47開始加1，只改變當前元件顯示的storProp1，不會同步到LocalStorage中
      Button(`Parent from LocalStorage ${this.storProp1}`)
        .onClick(() => this.storProp1 += 1)
      Child()
    }
  }
}
@Component
struct Child {
  // @LocalStorageProp變數裝飾器與LocalStorage中的'PropA'屬性建立單向繫結
  @LocalStorageProp('PropA') storProp2: number = 2;
  build() {
    Column({ space: 15 }) {
      // 當CompA改變時，當前storProp2不會改變，顯示47
      Text(`Parent from LocalStorage ${this.storProp2}`)
    }
  }
}

// 構造LocalStorage例項
let para:Record<string,number> = { 'PropA': 47 };
let storage: LocalStorage = new LocalStorage(para);
// 呼叫link9+介面構造'PropA'的雙向同步資料，linkToPropA 是全域性變數
let linkToPropA: SubscribedAbstractProperty<object> = storage.link('PropA');
@Entry(storage)
@Component
struct CompA {
  // @LocalStorageLink('PropA')在CompA自定義元件中建立'PropA'的雙向同步資料，初始值為47，因為在構造LocalStorage已經給“PropA”設定47
  @LocalStorageLink('PropA') storLink: number = 1;
  build() {
    Column() {
      Text(`incr @LocalStorageLink variable`)
        // 點選“incr @LocalStorageLink variable”，this.storLink加1，改變同步回storage，全域性變數linkToPropA也會同步改變
        .onClick(() => this.storLink += 1)
      // 並不建議在元件內使用全域性變數linkToPropA.get()，因為可能會有生命週期不同引起的錯誤。
      Text(`@LocalStorageLink: ${this.storLink} - linkToPropA: ${linkToPropA.get()}`)
    }
  }
}

let ls:Record<string,number> = { 'countStorage': 1}
let storage:LocalStorage = new LocalStorage(ls);
@Component
struct Child {
  // 子元件例項的名字
  label: string = 'no name';
  // 和LocalStorage中“countStorage”的雙向繫結資料
  @LocalStorageLink('countStorage') playCountLink: number = 0;
  build() {
    Row() {
      Text(this.label)
        .width(50).height(60).fontSize(12)
      Text(`playCountLink ${this.playCountLink}: inc by 1`)
        .onClick(() => {
          this.playCountLink += 1;
        })
        .width(200).height(60).fontSize(12)
    }.width(300).height(60)
  }
}
@Entry(storage)
@Component
struct Parent {
  @LocalStorageLink('countStorage') playCount: number = 0;
  build() {
    Column() {
      Row() {
        Text('Parent')
          .width(50).height(60).fontSize(12)
        Text(`playCount ${this.playCount} dec by 1`)
          .onClick(() => {
            this.playCount -= 1;
          })
          .width(250).height(60).fontSize(12)
      }.width(300).height(60)
      Row() {
        Text('LocalStorage')
          .width(50).height(60).fontSize(12)
        Text(`countStorage ${this.playCount} incr by 1`)
          .onClick(() => {
            storage.set<number|undefined>('countStorage', Number(storage.get<number>('countStorage')) + 1);
          })
          .width(250).height(60).fontSize(12)
      }.width(300).height(60)
      Child({ label: 'ChildA' })
      Child({ label: 'ChildB' })
      Text(`playCount in LocalStorage for debug ${storage.get<number>('countStorage')}`)
        .width(300).height(60).fontSize(12)
    }
  }
}

// EntryAbility.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
let para:Record<string,number> = { 'PropA': 47 };
let localStorage: LocalStorage = new LocalStorage(para);
export default class EntryAbility extends UIAbility {
storage: LocalStorage = localStorage
onWindowStageCreate(windowStage: window.WindowStage) {
windowStage.loadContent('pages/Index', this.storage);
}
}

// 透過getShared介面獲取stage共享的LocalStorage例項
let storage = LocalStorage.getShared()
@Entry(storage)
@Component
struct CompA {
  // can access LocalStorage instance using 
  // @LocalStorageLink/Prop decorated variables
  @LocalStorageLink('PropA') varA: number = 1;
  build() {
    Column() {
      Text(`${this.varA}`).fontSize(50)
    }
  }
}