HarmonyOS 页面级的状态存储 LocalStorage

LocalStorage：页面级的状态存储

• 应用程序可以创建多个LocalStorage实例，LocalStorage实例可以在页面内共享，也可以通过GetShared接口，实现跨页面、UIAbility实例内共享
• 组件树的根节点，即被@Entry装饰的@Component，可以被分配一个LocalStorage实例，此组件的所有子组件实例将自动获得对该LocalStorage实例的访问权限
• 被@Component装饰的组件最多可以访问一个LocalStorage实例和AppStorage，未被@Entry装饰的组件不可被独立分配LocalStorage实例，只能接受父组件通过@Entry传递来的LocalStorage实例。一个LocalStorage实例在组件树上可以被分配给多个组件

1、应用内使用

let obj: Record<string, Object> = { 'age': 18 };
let storage: LocalStorage = new LocalStorage(obj);
storage.setOrCreate('name', '刘雯');
storage.get('age'); // 18
const prop: SubscribedAbstractProperty<number> = storage.prop('age');
prop.get(); // 18
prop.set(1);
prop.get(); // 1
storage.get('age'); // 18 单向
const link: SubscribedAbstractProperty<number> = storage.link('age');
link.get(); // 18
link.set(1);
link.get(); // 1
storage.get('age'); // 1 双向

2、页面UI内部使用

let obj: Record<string, Object> = { 'age': 18, name: '刘雯' };
let storage: LocalStorage = new LocalStorage(obj);

// 根节点可通过@Entry来接收LocalStorage实例
@Entry(storage)
@Component Index {
    // 单向绑定
    @LocalStorageProp('age') age: number = 1;
    // 双向绑定
    @LocalStorageLink('name') name: string = '';
}

3、从UIAbility共享到一个或多个视图（推荐）

onWindowStageCreate(windowStage: window.WindowStage) {
    // 页面级UI状态存储单元，这里用于为加载到窗口的页面内容传递状态属性
    windowStage.loadContent('pages/Index', this.storage);
}

// 页面1 Index.ets
// 通过getShared接口获取stage共享的LocalStorage实例
let storage = LocalStorage.getShared();
@Entry(storage)
@Component Index {
    @LocalStorageLink('age') age: number = 1;
}
// 页面2 Home.ets
let storage = LocalStorage.getShared();
@Entry(storage)
@Component Home {
    @LocalStorageLink('age') age: number = 1;
}

4、根节点可通过@Entry来接收LocalStorage实例，自定义组件（子节点）也可以通过构造参数来传递LocalStorage实例

• 从API version 12开始，自定义组件支持接收LocalStorage实例
• 当自定义组件作为子节点，LocalStorage实例必须要放在第二个参数位置传递（第一个参数是传递给子组件的命名参数）

let obj1: Record<string, Object> = { 'age': 18 };
let storage1: LocalStorage = new LocalStorage(obj1);

let obj2: Record<string, Object> = { name: '刘雯' };
let storage2: LocalStorage = new LocalStorage(obj2);

@Entry(storage1)
@Component
struct Index {
    build() {
        // 自定义组件第二个参数支持接收LocalStorage实例
        Child({}, storage2)
    }
}
@Component
struct Child {
    // 使用第二个参数传递到的LocalStorage实例
    @LocalStorageLink('name') name: string = '';
    // 因为被`@Component`装饰的组件最多可以访问一个`LocalStorage`实例和`AppStorage`，因此此处无法获取到 storage1 的数据，仅读取默认数据0
    @LocalStorageLink('age') age: number = 0;
}