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

根據(jù)不同的使用場景，ArkTS提供了以下幾種應用狀態(tài)管理的能力：

• LocalStorage ：使用范圍在同一頁面，頁面與卡片和頁面與UIAbility內部，負責UI狀態(tài)存儲。
• AppStorage ：運行時存儲，保存在內存中，應用范圍全局共享，提供統(tǒng)一的存儲供所有頁面訪問。
• PersistentStorage ：持久化存儲，保存在硬盤上，在應用退出或重啟后，數(shù)據(jù)依舊保留。

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

一、LocalStorage

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

場景一：更新服務卡片

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

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

實踐步驟：前請熟悉開發(fā)文檔開發(fā)知識更新庫[docs.qq.com/doc/DUmN4VVhBd3NxdExK]

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

或者添加mau123789是v直接領

let storage = new LocalStorage();復制

并為Entry增加參數(shù)storage。

例如，WidgetCard.ets，默認：

@Entry
@Component
struct WidgetCard {
...復制

改之后：

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

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

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

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

卡片標簽默認顯示了Hello。

在發(fā)送方EntryFormAbility.ts文件的onFormEvent函數(shù)里：

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按鈕，觸發(fā)了postCardAction事件從而調用了onFormEvent函數(shù)，執(zhí)行結果如下：

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

在頁面初次加載時，可以在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函數(shù)中，將默認的：

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

改為傳遞參數(shù)的方式，如下：

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

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

let storage = LocalStorage.GetShared()復制

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

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

這樣名為abilitycount的值就通過LocalStorage傳遞到頁面了，本地默認的值0變?yōu)榱藗鬟f過來的值1。

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

二、AppStorage

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

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

實踐步驟：

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

AppStorage.SetOrCreate('appcount', 10);復制

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

@Entry()
@Component
struct Index {

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

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

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

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

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

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

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

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

同樣，在第二個頁面Second.ets中把AppStorage中的屬性值改為12，我們發(fā)現(xiàn)在Index.ets和First.ets中，對應的屬性值也都變?yōu)榱烁暮蟮闹怠?/p>

如上測試，我們發(fā)現(xiàn)的確可以通過AppStorage在不同頁面間共享數(shù)據(jù)。

三、PersistentStorage

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

我們通過在Index.ets頁面創(chuàng)建一個屬性放到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
struct First {
  @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有持續(xù)化存儲的作用。

四、總結

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

審核編輯 黃宇