当前位置：首页 > article >正文

鸿蒙开发（24）LocalStorage：页面级UI状态存储和AppStorage：应用全局的UI状态存储

article 2025/1/5 6:34:31

LocalStorage：页面级UI状态存储

LocalStorage是页面级的UI状态存储，通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage支持UIAbility实例内多个页面间状态共享。
LocalStorage你可以理解为LocalStorage就是内存数据库。你可以往里面存放数据。
LocalStorage和AppStorage都是内存级别的存储方案。唯一不同的在于作用范围。
LocalStorage解决问题：
1. 在同一个EneryAlibity中多个页面可以实现数据的共享。不同EneryAlibity无法实现数据共享。
2. 实现一个页面中定义了存储的数据，在其他的子组件中都可以共享这个内存的数据。
代码实现：

(1）创建新实例并使用给定对象初始化

class Data {
 code: number;

 constructor(code: number) {
   this.code = code;
 }
}
// 创建新实例并使用给定对象初始化
let para: Record<string, number> = { 'PropA': 47 };
let storage: LocalStorage = new LocalStorage(para);
storage.setOrCreate('PropB', new Data(50));

(2）绑定

@Entry(storage)
@Component
struct Parent {

}

需要将storage示例绑定给对应的entry修饰的组件。这样才能表达当前这个页面具有指定某一个storage内存状态。
以后这个页面的所有组件都可以共享这一个storage对象。

（3）获取数据

LocalStorage根据与@Component装饰的组件的同步类型不同，提供了两个装饰器：

@LocalStorageProp：@LocalStorageProp装饰的变量与LocalStorage中给定属性建立单向同步关系。

// 创建新实例并使用给定对象初始化
let para: Record<string, number> = { 'PropA': 47 };
let storage: LocalStorage = new LocalStorage(para);
// 使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct Parent {
  // @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
  @LocalStorageProp('PropA') storageProp1: number = 1;

  build() {
    Column({ space: 15 }) {
      // 点击后从47开始加1，只改变当前组件显示的storageProp1，不会同步到LocalStorage中
      Button(`Parent from LocalStorage ${this.storageProp1}`)
        .onClick(() => {
          this.storageProp1 += 1
        })
      Child()
    }
  }
}

@Component
struct Child {
  // @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
  @LocalStorageProp('PropA') storageProp2: number = 2;

  build() {
    Column({ space: 15 }) {
      // 当Parent改变时，当前storageProp2不会改变，显示47
      Text(`Parent from LocalStorage ${this.storageProp2}`)
    }
  }
}

@LocalStorageLink：@LocalStorageLink装饰的变量与LocalStorage中给定属性建立双向同步关系。

// 构造LocalStorage实例
let para: Record<string, number> = { 'PropA': 47 };
let storage: LocalStorage = new LocalStorage(para);
// 调用link（api9以上）接口构造'PropA'的双向同步数据，linkToPropA 是全局变量
let linkToPropA: SubscribedAbstractProperty<object> = storage.link('PropA');

@Entry(storage)
@Component
struct Parent {

  // @LocalStorageLink('PropA')在Parent自定义组件中创建'PropA'的双向同步数据，初始值为47，因为在构造LocalStorage已经给“PropA”设置47
  @LocalStorageLink('PropA') storageLink: number = 1;

  build() {
    Column() {
      Text(`incr @LocalStorageLink variable`)
        // 点击“incr @LocalStorageLink variable”，this.storageLink加1，改变同步回storage，全局变量linkToPropA也会同步改变

        .onClick(() => {
          this.storageLink += 1
        })

      // 并不建议在组件内使用全局变量linkToPropA.get()，因为可能会有生命周期不同引起的错误。
      Text(`@LocalStorageLink: ${this.storageLink} - linkToPropA: ${linkToPropA.get()}`)
    }
  }
}

（4）子组件获取数据

@Component
struct Child {
  // @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
  @LocalStorageProp('PropA') storageProp2: number = 2;

  build() {
    Column({ space: 15 }) {
      // 当Parent改变时，当前storageProp2不会改变，显示47
      Text(`Parent from LocalStorage ${this.storageProp2}`)
    }
  }
}

（5）页面共享数据

上面的实例中，LocalStorage的实例仅仅在一个@Entry装饰的组件和其所属的子组件（一个页面）中共享，如果希望其在多个视图中共享，可以在所属UIAbility中创建LocalStorage实例，并调用windowStage.loadContent。

// EntryAbility.ets
import { UIAbility } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
	para:Record<string, number> = { 'PropA': 47 };
	storage: LocalStorage = new LocalStorage(this.para);
	
	onWindowStageCreate(windowStage: window.WindowStage) {
		windowStage.loadContent('pages/Index', this.storage);
	}
}

在页面中使用，首先getShared拿到你们想要的storage对象，绑定到页面中

在下面的用例中，Index页面中的propA通过getShared()方法获取到共享的LocalStorage实例。点击Button跳转到Page页面，点击Change propA改变propA的值，back回Index页面后，页面中propA的值也同步修改。

// index.ets

// 通过getShared接口获取stage共享的LocalStorage实例
@Entry({ storage: LocalStorage.getShared() })
@Component
struct Index {
  // 可以使用@LocalStorageLink/Prop与LocalStorage实例中的变量建立联系
  @LocalStorageLink('PropA') propA: number = 1;
  pageStack: NavPathStack = new NavPathStack();

  build() {
    Navigation(this.pageStack) {
      Row(){
        Column() {
          Text(`${this.propA}`)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
          Button("To Page")
            .onClick(() => {
              this.pageStack.pushPathByName('Page', null);
            })
        }
        .width('100%')
      }
      .height('100%')
    }
  }
}

说明：
在UI页面通过getShared接口获取通过loadContent共享的LocalStorage实例。
LocalStorage.getShared()只在模拟器或者实机上才有效，在Previewer预览器中使用不生效。

AppStorage：应用全局的UI状态存储

AppStorage是应用全局的UI状态存储，是和应用的进程绑定的，由UI框架在应用程序启动时创建，为应用程序UI状态属性提供中央存储。
页面一：

@Entry
@Component
struct Page05_AddTask {
	  //检测整个应用有没有PropA,如果没有创建一个
	  @StorageLink('PropA') storageLink:number = 0
}

当进入项目中第一个页面发现全局存储的对象PropA,判断全局存储里面是否有这个变量。如果有这个变量，获取这个变量的值，拿到页面中用，
如果没有这个变量，讲这样页面初始化的值作为全局存储的结果
storageLink：初始化、更新、获取三个功能

页面二中：

@Entry
@Component
struct Page05_AddTask {
 	//检测整个应用有没有PropA,如果没有创建一个
 	//双向
	@StorageLink('PropA') storageLink:number = 10
	//单向取
	@StorageProp('PropA') storageProp:number = 99
	  build() {
		 //标题模块
      Text("新建任务"+`${this.storageLink}`)
        .fontSize(26)
        .fontWeight(FontWeight.Bold)
        .margin({bottom:20})
	  }
}

图1 @StorageProp初始化规则图示
在这里插入图片描述
图2 @StorageLink初始化规则图示

限制条件

@StorageProp/@StorageLink的参数必须为string类型，否则编译期会报错。

AppStorage.setOrCreate('PropA', 47);

// 错误写法，编译报错
@StorageProp() storageProp: number = 1;
@StorageLink() storageLink: number = 2;

// 正确写法
@StorageProp('PropA') storageProp: number = 1;
@StorageLink('PropA') storageLink: number = 2;