[TOC] ## LocalStorage：頁面級UI狀態存儲 ## 示例 ### 直接使用 ``` let storage = new LocalStorage({ 'PropA': 47 }); // 創建新實例并使用給定對象初始化 let propA = storage.get('PropA') // propA == 47 let link1 = storage.link('PropA'); // link1.get() == 47 let link2 = storage.link('PropA'); // link2.get() == 47 let prop = 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 ``` ## 從UI內部使用@LocalStorageLink ``` // 使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() } } } ``` ## LocalStorageProp 單項綁定 ``` @Component struct Child { // @LocalStorageProp變量裝飾器與LocalStorage中的'PropA'屬性建立單向綁定 @LocalStorageProp('PropA') storProp2: number = 2; build() { Column({ space: 15 }) { // 當CompA改變時，當前storProp2不會改變，顯示47 Text(`Parent from LocalStorage ${this.storProp2}`) } } } ```