# 開發者說 #

【開發者說】欄目是為HarmonyOS開發者提供的展示和分享平臺，在這里，大家可以發表自己的技術洞察和見解，也可以展示自己的開發心得和成果。

歡迎大家積極投稿，后臺回復【投稿】，即可獲得投稿渠道。期待你們的分享~

平時在開發的過程中，我們會在應用中共享數據，在不同的頁面間共享信息。雖然常用的共享信息，也可以通過不同頁面中組件間信息共享的方式，但有時使用應用級別的狀態管理會讓開發工作變得簡單。

根據不同的使用場景，ArkTS提供了以下幾種應用狀態管理的能力：

• LocalStorage：使用范圍在同一頁面，頁面與卡片和頁面與UIAbility內部，負責UI狀態存儲。

• AppStorage：運行時存儲，保存在內存中，應用范圍全局共享，提供統一的存儲供所有頁面訪問。

• PersistentStorage：持久化存儲，保存在硬盤上，在應用退出或重啟后，數據依舊保留。

下面通過簡單的程序示例，熟悉一下這三種用法。其中示例程序中包含了以下主要文件：

一

LocalStorage

頁面級的UI狀態存儲，同一個頁面共享同一個LocalStorage，不同的頁面都可以綁定對應的LocalStorage。最常用的就是更新服務卡片和跨頁面的信息傳遞。

場景一：更新服務卡片

服務卡片中被@Entry裝飾的@Component，可以被分配一個LocalStorage實例，在組件內部，通過@LocalStorageProp裝飾器定義本地變量，并綁定到對應組件上。更新卡片時，先定義一個包含了和LocalStorageProp屬性同名的參數并放到formBindingData中，然后通過formProvider.updateForm函數，就可以更新服務卡片了。

我們要在EntryFormAbility.ets中通過傳遞LocalStorage改變服務卡片中的默認Hello的文本標簽為當前時間。

實踐步驟：

1.修改服務卡片布局文件，文件開頭添加:

let storage = new LocalStorage();

并為Entry增加參數storage。

例如，WidgetCard.ets，默認：

@Entry
@Component
struct WidgetCard {
...

改之后：

let storage = new LocalStorage();
@Entry(storage)
@Component
struct WidgetCard {
...

2.在EntryFormAbility.ets中，用裝飾器LocalStorageProp定義本地變量，裝飾器的參數必須要和formBindingData中的屬性名稱相同。

例如，在接收方服務卡片中定義如下：

@LocalStorageProp('localprop') localValue: string = 'Hello';

（左右滑動查看更多）

卡片標簽默認顯示了Hello。

在發送方EntryFormAbility.ts文件的onFormEvent函數里：

onFormEvent(formId, message) {
  let date = new Date();
  let str = date.getHours().toString().padStart(2, '0') + ':' +  date.getMinutes().toString().padStart(2, '0') + ':' + date.getSeconds().toString().padStart(2, '0')
  let formData = {
    'localprop': 'Time: ' + str,
  };
  let formInfo = formBindingData.createFormBindingData(formData)
  formProvider.updateForm(formId, formInfo).then((data) => {
    console.info('FormAbility updateForm success.' + JSON.stringify(data));
  }).catch((error) => {
    console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
  })
}

（左右滑動查看更多）

formData對象里包含了名稱為localprop的鍵值，它通過formBindingData由formProvider傳遞給服務卡片，服務卡片接收到該對象后，就自動把該對象賦值給LocalStorage，相應的LocalStorageProp也自動跟著刷新。

這個動作是通過點擊卡片上的update按鈕，觸發了postCardAction事件從而調用了onFormEvent函數，執行結果如下：

場景二：跨頁面的信息傳遞

在頁面初次加載時，可以在EntryAbility.ts中傳遞一個LocalStorage對象給要打開的頁面。

我們打算在index.ets頁面加載的時候，在EntryAbility中傳遞一個包含abilitycount值為1的Storage，頁面加載后界面顯示該值。

實踐步驟：

1.在EntryAbility.ts中定義一個LocalStorage類型的變量，里面包含abilitycount屬性。

export default class EntryAbility extends UIAbility {
  storage: LocalStorage = new LocalStorage({
    'abilitycount': 1
});

（左右滑動查看更多）

在onWindowStageCreate函數中，將默認的：

windowStage.loadContent('pages/Index', (err, data) => {

（左右滑動查看更多）

改為傳遞參數的方式，如下：

windowStage.loadContent('pages/Index', this.storage);

（左右滑動查看更多）

2.在頁面端Index.ets中，文件開頭添加代碼來獲取共享的LocalStorage。

let storage = LocalStorage.GetShared()

（左右滑動查看更多）

在結構體內部，通過裝飾器LocalStorageProp加同樣屬性名稱作為參數，定義一個變量。

@LocalStorageProp('abilitycount') abilityCount: number = 0;

（左右滑動查看更多）

這樣名為abilitycount的值就通過LocalStorage傳遞到頁面了，本地默認的值0變為了傳遞過來的值1。

下圖中LocalStorage的值就是頁面打開時顯示的傳遞過來的值。

二

AppStorage

全局的UI狀態存儲，在運行時階段可以在不同的頁面間共享信息。

我們通過在Index.ets頁面創建一個變量放到AppStorage中，然后分別在First.ets頁面和Second.ets頁面訪問和修改。

實踐步驟：

1.首先在Index.ets中，通過AppStorage定義一個屬性。

AppStorage.SetOrCreate('appcount', 10);

（左右滑動查看更多）

然后，在組件結構體中使用StorageProp裝飾器定義一個變量，參數為之前定義的appcount屬性。

@Entry()
@Component
struct Index {


@StorageProp('appcount')appValue:number=0;

（左右滑動查看更多）

2.在First.ets頁面中，通過StorageProp定義一個appValue變量，關聯到appcount屬性上。

struct First {
@StorageProp('appcount')appValue:number=0;

（左右滑動查看更多）

在本地修改時，把用戶輸入的值寫入AppStorage，使用如下語句：

AppStorage.Set('appcount', this.textApp);

（左右滑動查看更多）

Second.ets頁面與First.ets頁面功能完全相同，主要顯示AppStorage在不同頁面顯示和修改的效果。

如下圖，主頁面、第一個頁面和第二個頁面初始狀態下，讀取到的AppStorage中的同一個屬性的值都是10。

在第一個頁面First.ets中把AppStorage中的屬性值改為11，我們發現在主頁面Index.ets和Second.ets中，對應的屬性值都發生了變化。

同樣，在第二個頁面Second.ets中把AppStorage中的屬性值改為12，我們發現在Index.ets和First.ets中，對應的屬性值也都變為了改后的值。

如上測試，我們發現的確可以通過AppStorage在不同頁面間共享數據。

三

PersistentStorage

持久化存儲UI狀態。保存在PersistentStorage中的數據，即使應用退出了，對應的值依然會保留，不是在內存中，而是存儲在固定存儲介質上的。

我們通過在Index.ets頁面創建一個屬性放到PersistentStorage中，然后分別在First.ets頁面和Second.ets頁面進行修改，然后再重啟應用觀察結果。

實踐步驟：

1.首先在Index.ets中，在PersistentStorage里定義一個屬性。

PersistentStorage.PersistProp('persistentcount', 100);

（左右滑動查看更多）

然后在組件結構體中，通過裝飾器StorageProp定義一個屬性為persistentcount的變量。

@Entry()
@Component
struct Index {
@StorageProp('persistentcount')persistentValue:number=0;

（左右滑動查看更多）

2.在First.ets頁面中，我們通過裝飾器StorageProp定義一個變量綁定persistentcount屬性。

@Entry
@Component
structFirst{
@StorageProp('persistentcount')persistentValue:number=0;

（左右滑動查看更多）

通過輸入框輸入新值改變原來存儲在PersistentStorage的內容。

AppStorage.Set('persistentcount', this.textPersistent);

（左右滑動查看更多）

演示效果如下圖，Index.ets頁面，在初始時AppStorage和PersistentStorage中的對應屬性值分別是10和100，在First.ets頁面中，我們分別改為11和111。

關閉應用，然后重新打開，如下圖所示，AppStorage中的屬性值恢復為了10，PersistentStorage中的屬性值依舊是111，是改后的值。這證明了PersistentStorage有持續化存儲的作用。

四

總結

通過這次實踐，熟悉了不同的狀態變量在應用中的不同應用范圍，選用合適的狀態變量會讓應用開發簡單快捷，本地頁面內部使用LocalStorage保存數據，應用頁面間通過AppStorage傳遞信息，PersistentStorage可以持久化存儲數據信息。

更多推薦