HarmonyOS | 状态管理(六) | LocalStorage(页面级UI状态存储)

本文链接：https://blog.youkuaiyun.com/tanzuai/article/details/136326044

系列文章目录

文章目录

系列文章目录
前言
一、LocalStorage 是什么？
二、特性
三、LocalStorage 使用场景
四、两种不同的同步类型装饰器
总结

前言

以上文章介绍的 装饰器 仅能页面内，即一个组件树上共享状态变量，后续文章讲解应用级的状态管理。
本篇文章我们讲解的是：LocalStorage (页面级UI状态存储)

一、LocalStorage 是什么？

页面级UI状态存储，通常用于UIAbility内、页面间的状态共享

二、特性

应用程序可以创建多个LocalStorage实例，LocalStorage实例可以在页面内共享，也可以通过GetShared接口，实现跨页面、UIAbility实例内共享。
组件树的根节点，即被@Entry装饰的@Component，可以被分配一个LocalStorage实例，此组件的所有子组件实例将自动获得对该LocalStorage实例的访问权限。
被@Component装饰的组件最多可访问一个LocalStorage实例，未被@Entry装饰的组件不可被独立分配LocalStorage实例，只能接受父组件通过@Entry传递来的LocalStorage实例。
一个LocalStorage实例在组件树上可以被分配给多个组件。
LocalStorage中的所有属性都是可变的。
应用程序决定LocalStorage对象的生命周期。当应用释放最后一个指向LocalStorage的引用时，比如销毁最后一个自定义组件，LocalStorage将被JS Engine垃圾回收。

三、LocalStorage 使用场景

let storage = new LocalStorage({
    'PropA': 47 }); // 创建新实例并使用给定对象初始化
let propA = storage.get('PropA') // propA == 47
let link1 = storage.link('PropA'); // link1.get() == 47
let link2 = storage.link('PropA'); // link2.get() == 47
let prop = storage.prop('PropA'); // prop.get() = 47
link1.set(48); // two-way sync: link1.get() == link2.get() == prop.get() == 48
prop.set(1); // one-way sync: prop.get()=1; but link1.get() == link2.get() == 48
link1.set(49)