鴻蒙應用開發(fā)-應用狀態(tài)存儲（LocalStorage、AppStorage..）

一、鴻蒙應用開發(fā)-初體驗
二、鴻蒙應用開發(fā)-基礎組件
三、鴻蒙應用開發(fā)-組件樣式
四、鴻蒙應用開發(fā)-組件構建函數(shù)
五、鴻蒙應用開發(fā)-組件組件狀態(tài)共享
六、鴻蒙應用開發(fā)-應用狀態(tài)存儲

目錄

1. UIAbility內狀態(tài)-LocalStorage

LocalStorage 是頁面級的UI狀態(tài)存儲，通過 @Entry 裝飾器接收的參數(shù)可以在頁面內共享同一個 LocalStorage 實例。 LocalStorage 也可以在 UIAbility 內，頁面間共享狀態(tài)。
1）頁面內共享

  • 創(chuàng)建 LocalStorage 實例：const storage = new LocalStorage({ key: value })
  • 單向 @LocalStorageProp('user') 組件內可變
  • 雙向 @LocalStorageLink('user') 全局均可變
class User {
  name?: string
  age?: number
}
const storage = new LocalStorage({
  user: { name: 'jack', age: 18 }
})

@Entry(storage)
@Component
struct Index {
  @LocalStorageProp('user')
  user: User = {}

  build() {
    Column({ space: 15 }){
      Text('Index：')
      Text(this.user.name + this.user.age)
      Divider()
      ChildA()
      Divider()
      ChildB()
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct ChildA {
  @LocalStorageProp('user')
  user: User = {}

  build() {
    Column({ space: 15 }){
      Text('ChildA：')
      Text(this.user.name + this.user.age)
        .onClick(()=>{
          this.user.age ++
        })
    }
  }
}

@Component
struct ChildB {
  @LocalStorageLink('user')
  user: User = {}

  build() {
    Column({ space: 15 }){
      Text('ChildB：')
      Text(this.user.name + this.user.age)
        .onClick(()=>{
          this.user.age ++
        })
    }
  }
}

2）頁面間共享

  • 在 UIAbility 創(chuàng)建 LocalStorage 通過 loadContent 提供給加載的窗口

在頁面使用 const storage = LocalStorage.GetShared() 得到實例，通過 @Entry(storage) 傳入頁面

entryAbility/EntryAbility.ts


+  storage = new LocalStorage({
+    user: { name: 'jack', age: 18 }
+  })

  onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

+    windowStage.loadContent('pages/Index', this.storage , (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }

models/index.ets

export class User {
  name?: string
  age?: number
}

pages/Index.ets

import { User } from '../models'
const storage = LocalStorage.GetShared()

@Entry(storage)
@Component
struct Index {
  @LocalStorageProp('user')
  user: User = {}

  build() {
    Column({ space: 15 }) {
      Text('Index：')
      Text(this.user.name + this.user.age)
        .onClick(()=>{
          this.user.age ++
        })
      Navigator({ target: 'pages/OtherPage' }){
        Text('Go Other Page')
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

pages/OtherPage.ets

import { User } from '../models'
const storage = LocalStorage.GetShared()

@Entry(storage)
@Component
struct OtherPage {
  @LocalStorageLink('user')
  user: User = {}

  build() {
    Column({ space: 15 }) {
      Text('OtherPage：')
      Text(this.user.name + this.user.age)
        .onClick(()=>{
          this.user.age ++
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

注意

  • 頁面間共享需要要模擬器測試
  • 應用邏輯中使用參考 鏈接

2. 應用狀態(tài)-AppStorage

AppStorage 是應用全局的UI狀態(tài)存儲，是和應用的進程綁定的，由UI框架在應用程序啟動時創(chuàng)建，為應用程序UI狀態(tài)屬性提供中央存儲。

如果是初始化使用 AppStorage.SetOrCreate(key,value)
單向 @StorageProp('user') 組件內可變
雙向 @StorageLink('user') 全局均可變
1）通過UI裝飾器使用

import { User } from '../models'

AppStorage.SetOrCreate<User>('user', { name: 'jack', age: 18 })

@Entry
@Component
struct Index {
  @StorageProp('user')
  // 可忽略，編輯器類型錯誤
  user: User = {}

  build() {
    Column({ space: 15 }) {
      Text('Index：')
      Text(this.user.name + this.user.age)
        .onClick(() => {
          this.user.age++
        })
      Divider()
      ChildA()
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct ChildA {
  @StorageLink('user')
  user: User = {}

  build() {
    Column({ space: 15 }){
      Text('ChildA：')
      Text(this.user.name + this.user.age)
        .onClick(()=>{
          this.user.age ++
        })
    }
  }
}

2）通過邏輯使用

  • AppStorage.Get<ValueType>(key) 獲取數(shù)據(jù)
  • AppStorage.Set<ValueType>(key,value) 覆蓋數(shù)據(jù)
  • const link: SubscribedAbstractProperty<ValueType> = AppStorage.Link(key)覆蓋數(shù)據(jù)
    • link.set(value) 修改
    • link.get() 獲取
import promptAction from '@ohos.promptAction'
import { User } from '../models'

AppStorage.SetOrCreate<User>('user', { name: 'jack', age: 18 })

@Entry
@Component
struct Index {
  @StorageLink('user')
  user: User = {}

  build() {
    Column({ space: 15 }) {
      Text('Index：')
      Text(this.user.name + this.user.age)
        .onClick(() => {
          this.user.age++
        })
      Divider()
      Text('Get()')
        .onClick(() => {
          // 僅獲取
          const user = AppStorage.Get<User>('user')
          promptAction.showToast({
            message: JSON.stringify(user)
          })
        })
      Text('Set()')
        .onClick(() => {
          // 直接設置
          AppStorage.Set<User>('user', {
            name: 'tom',
            age: 100
          })
          // 觀察頁面更新沒
        })
      Text('Link()')
        .onClick(() => {
          // 獲取user的prop
          const user: SubscribedAbstractProperty<User> = AppStorage.Link('user')
          user.set({
            name: user.get().name,
            // 獲取后修改
            age: user.get().age + 1
          })
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

3. 狀態(tài)持久化-PersistentStorage

PersistentStorage 將選定的 AppStorage 屬性保留在設備磁盤上。

DETAILS
UI和業(yè)務邏輯不直接訪問 PersistentStorage 中的屬性，所有屬性訪問都是對 AppStorage 的訪問，AppStorage 中的更改會自動同步到 PersistentStorage。

WARNING

  • 支持：number, string, boolean, enum 等簡單類型;
  • 如果：要支持對象類型，可以轉換成json字符串
  • 持久化變量最好是小于2kb的數(shù)據(jù)，如果開發(fā)者需要存儲大量的數(shù)據(jù)，建議使用數(shù)據(jù)庫api。

1）簡單數(shù)據(jù)類型的持久化，和獲取和修改

import { User } from '../models'

PersistentStorage.PersistProp('count', 100)

@Entry
@Component
struct Index {
  @StorageLink('count')
  count: number = 0

  build() {
    Column({ space: 15 }) {
      Text(this.count.toString())
        .onClick(() => {
          this.count++
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

2）復雜數(shù)據(jù)類型的持久化，和獲取和修改

import promptAction from '@ohos.promptAction'
import { User } from '../models'

PersistentStorage.PersistProp('userJson', `{ "name": "jack", "age": 18 }`)

@Entry
@Component
struct Index {
  @StorageProp('userJson')
  @Watch('onUpdateUser')
  userJson: string = '{}'
  @State
  user: User = JSON.parse(this.userJson)

  onUpdateUser() {
    this.user = JSON.parse(this.userJson)
  }

  build() {
    Column({ space: 15 }) {
      Text('Index：')
      Text(this.user.name + this.user.age)
        .onClick(() => {
          this.user.age++
          // 修改
          AppStorage.Set('userJson', JSON.stringify(this.user))
        })
      Divider()
      Text('Get()')
        .onClick(() => {
          // 獲取
          const user = AppStorage.Get<string>('userJson')
          promptAction.showToast({ message: user })
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

4. 設備環(huán)境-Environment

開發(fā)者如果需要應用程序運行的設備的環(huán)境參數(shù)，以此來作出不同的場景判斷，比如多語言，暗黑模式等，需要用到Environment 設備環(huán)境查詢。
Environment 的所有屬性都是不可變的（即應用不可寫入），所有的屬性都是簡單類型。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容