鸿蒙笔记--存储

这一节了解一下鸿蒙中常用存储API,主要有LocalStorage ,AppStorage,PersistentStorage,LocalStorage 是一种页面级UI状态存储机制,主要用于在UIAbility内和页面间共享状态数据。通过使用特定的装饰器,LocalStorage能够实现组件内部变量与LocalStorage中属性的单向或双向同步。

LocalStorage的装饰器器

@LocalStorageProp:此装饰器用于建立组件内部变量与LocalStorage中指定属性的单向同步关系。当LocalStorage中的属性变化时,会同步到组件的变量,但本地修改不会同步回LocalStorage。

@LocalStorageLink:此装饰器用于建立组件内部变量与LocalStorage中指定属性的双向同步关系。本地和LocalStorage中的修改都会互相同步。

栗子:

TypeScript 复制代码
EntryAbility.ts 

import UIAbility from '@ohos.app.ability.UIAbility';
import hilog from '@ohos.hilog';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
  onCreate(want, launchParam) {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy() {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

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

  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) ?? '');
    });
  }

  onWindowStageDestroy() {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground() {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground() {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

Index.ets

TypeScript 复制代码
import { User } from '../models'

const storage = LocalStorage.GetShared()

@Entry(storage)
@Component
struct Index {

  @LocalStorageProp('user')
  user: User = {}

  build() {
    Column({ space: 30 }) {
      Text(this.user.name + this.user.age)
        .onClick(() => {
          this.user.age ++
        })

      Child()

      Navigator({
        target: 'pages/OtherPage',
      }){
        Text('Jump Other Page')
      }
    }
    .height('100%')
  }
}

@Component
struct Child {

  @LocalStorageLink('user')
  user: User = {}

  build() {
    Text(this.user.name + this.user.age)
      .onClick(() => {
        this.user.age ++
      })
  }
}

OtherPage.ets

TypeScript 复制代码
import { User } from '../models'

const storage = LocalStorage.GetShared()

@Entry(storage)
@Component
struct OtherPage {

  @LocalStorageLink('user')
  user: User = {}

  build() {
    Column(){
      Text(' Other Page ')
      Text(this.user.name + this.user.age)
        .onClick(() => {
          this.user.age ++
        })
    }
  }
}

bean类:

Index.ets

TypeScript 复制代码
export class User {
  name?: string
  age?: number
}

AppStorage为应用程序的UI状态属性提供中央存储,并且由UI框架在应用程序启动时创建。与LocalStorage不同,LocalStorage是页面级的存储,通常用于单个页面或页面间的数据共享,而AppStorage则是全局的状态共享,相当于整个应用的"中枢"。

AppStorage的装饰器

@StorageProp:此装饰器用于建立组件内部变量与AppStorage中指定属性的单向同步关系。当AppStorage中的属性变化时,会同步到组件的变量,但本地修改不会同步回AppStorage。

@StorageLink:此装饰器用于建立组件内部变量与AppStorage中指定属性的双向同步关系。本地和AppStorage中的修改都会互相同步。

栗子:

TypeScript 复制代码
Index.ets

import promptAction from '@ohos.promptAction'
import { User } from '../models'
AppStorage.SetOrCreate('user', { name: 'jack', age: 16 })

@Entry
@Component
struct Index {

  @StorageLink('user')
  user: User = {}

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

      Divider()
      Child()
      Divider()
      ChildB()
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct Child {

  @StorageLink('user')
  user: User = {}

  build() {
    Text(this.user.name + this.user.age)
      .onClick(() => {
        this.user.age ++
      })
  }
}

@Component
struct ChildB {

  build() {
    Column(){
      Text('获取 AppStorage')
        .onClick(() => {
          const user = AppStorage.Get<User>('user')
          promptAction.showToast({ message: user.name + user.age })
        })
      Text('修改 AppStorage')
        .onClick(() => {
          AppStorage.Set<User>('user', { name: 'tom', age: 20 })
        })

      Text('Link 修改 AppStorage')
        .onClick(() => {
          const link: SubscribedAbstractProperty<User> = AppStorage.Link('user')
          // promptAction.showToast({ message: link.get().name + link.get().age })
          link.set({
            name: link.get().name,
            age: link.get().age + 1
          })
        })
    }
  }
}

PersistentStorage 是一个用于实现数据持久化的存储机制,其主要作用是确保选定的 AppStorage 属性在应用程序重新启动时的值与应用程序关闭时的值相同。PersistentStorage 将选定的 AppStorage 属性保留在设备磁盘上,通过 API 来决定哪些 AppStorage 属性应借助 PersistentStorage 进行持久化。所有属性访问都是对 AppStorage 的访问,AppStorage 中的更改会自动同步到 PersistentStorage。

PersistentStorage的装饰器

@persistProp:此装饰器用于将指定的 AppStorage 属性持久化到设备磁盘上。例如,使用 PersistentStorage.persistProp('aProp', 47) 将 'aProp' 属性持久化。

@StorageLink:此装饰器用于建立组件内部变量与 AppStorage 中指定属性的双向同步关系,所有同步也会反映到 PersistentStorage 中。

栗子:

Index.ets

TypeScript 复制代码
import { User } from '../models'
PersistentStorage.PersistProp('count', 100)
PersistentStorage.PersistProp('user', `{ "name": "jack", "age": 17 }`)

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

  @State
  user: User = JSON.parse(this.userJson)

  build() {
    Column({ space: 15 }) {

      Text(this.count.toString())
        .onClick(() => {
          this.count ++
        })

      Text(this.user.name + this.user.age)
        .onClick(() => {
          this.user.age ++
          // this.userJson = JSON.stringify(this.user)
          AppStorage.Set('user', JSON.stringify(this.user))
        })
      Divider()
      ChildA()
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct ChildA {
  @StorageLink('count')
  count: number = 0
  @StorageLink('user')
  userJson: string = ''

  build() {
    Column(){
      Text(this.count.toString())
        .onClick(() => {
          this.count ++
        })
      Text(this.userJson)
    }
  }
}
相关推荐
致***锌5 分钟前
期权标准化合约是什么?
笔记
Wilber的技术分享1 小时前
【机器学习实战笔记 14】集成学习:XGBoost算法(一) 原理简介与快速应用
人工智能·笔记·算法·随机森林·机器学习·集成学习·xgboost
V我五十买鸡腿2 小时前
顺序栈和链式栈
c语言·数据结构·笔记·算法
麟城Lincoln3 小时前
【RHCSA-Linux考试题目笔记(自用)】servera的题目
linux·笔记·考试·rhcsa
丰锋ff4 小时前
计网学习笔记第2章 物理层(灰灰题库)
笔记·学习
阿絮~6 小时前
Apache RocketMQ进阶之路阅读笔记和疑问
笔记·apache·rocketmq
天水幼麟11 小时前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
天水幼麟13 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
绿皮的猪猪侠13 小时前
算法笔记上机训练实战指南刷题
笔记·算法·pta·上机·浙大
沧海一笑-dj13 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机