鸿蒙Harmony--LocalStorage--页面级UI状态存储详解_harmony localstorage 权限

走的太急疼的是脚，逼的太紧累的是心，很多时候，慢一点也没关系，多给自己一些耐心和等待，保持热爱，当下即是未来，生活自有安排! 

目录

一，定义

二，@LocalStorageProp定义

三，@LocalStorageProp装饰器使用规则说明

 四，@LocalStorageProp变量的传递/访问规则说明

 五，@LocalStorageLink定义

六， @LocalStorageLink装饰器使用规则说明

 七，@LocalStorageLink变量的传递/访问规则说明

 八，双向同步使用

九，单向同步使用

 十，将LocalStorage实例从UIAbility共享到一个或多个视图

一，定义

LocalStorage是页面级的UI状态存储，通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage支持UIAbility实例内多个页面间状态共享。

LocalStorage是ArkTS为构建页面级别状态变量提供存储的内存内“数据库”。

！注意：

1，应用程序可以创建多个LocalStorage实例，LocalStorage实例可以在页面内共享，也可以通过GetShared接口，实现跨页面、UIAbility实例内共享。

2，组件树的根节点，即被@Entry装饰的@Component，可以被分配一个LocalStorage实例，此组件的所有子组件实例将自动获得对该LocalStorage实例的访问权限。

3，被@Component装饰的组件最多可以访问一个LocalStorage实例和AppStorage，未被@Entry装饰的组件不可被独立分配LocalStorage实例，只能接受父组件通过@Entry传递来的LocalStorage实例。一个LocalStorage实例在组件树上可以被分配给多个组件。

4，LocalStorage中的所有属性都是可变的。

应用程序决定LocalStorage对象的生命周期。当应用释放最后一个指向LocalStorage的引用时，比如销毁最后一个自定义组件，LocalStorage将被JS Engine垃圾回收。

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

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

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

 限制条件：

1，LocalStorage创建后，命名属性的类型不可更改。后续调用Set时必须使用相同类型的值。

2，LocalStorage是页面级存储，GetShared接口仅能获取当前Stage通过windowStage.loadContent传入的LocalStorage实例，否则返回undefined。

二，@LocalStorageProp定义

如果要建立LocalStorage和自定义组件的联系，需要使用@LocalStorageProp和@LocalStorageLink装饰器。使用@LocalStorageProp(key)/@LocalStorageLink(key)装饰组件内的变量，key标识了LocalStorage的属性。

当自定义组件初始化的时候，@LocalStorageProp(key)/@LocalStorageLink(key)装饰的变量会通过给定的key，绑定LocalStorage对应的属性，完成初始化。本地初始化是必要的，因为无法保证LocalStorage一定存在给定的key（这取决于应用逻辑是否在组件初始化之前在LocalStorage实例中存入对应的属性）。

@LocalStorageProp(key)是和LocalStorage中key对应的属性建立单向数据同步，我们允许本地改变的发生，但是对于@LocalStorageProp，本地的修改永远不会同步回LocalStorage中，相反，如果LocalStorage给定key的属性发生改变，改变会被同步给@LocalStorageProp，并覆盖掉本地的修改。

三，@LocalStorageProp装饰器使用规则说明

 四，@LocalStorageProp变量的传递/访问规则说明

注意：

• 当装饰的数据类型为boolean、string、number类型时，可以观察到数值的变化。

• 当装饰的数据类型为class或者Object时，可以观察到赋值和属性赋值的变化，即Object.keys(observedObject)返回的所有属性。

• 当装饰的对象是array时，可以观察到数组添加、删除、更新数组单元的变化。

• 当@LocalStorageProp(key)装饰的数值改变被观察到时，修改不会被同步回LocalStorage对应属性键值key的属性中。

• 当前@LocalStorageProp(key)单向绑定的数据会被修改，即仅限于当前组件的私有成员变量改变，其他的绑定该key的数据不会同步改变。

• 当@LocalStorageProp(key)装饰的数据本身是状态变量，它的改变虽然不会同步回LocalStorage中，但是会引起所属的自定义组件的重新渲染。

• 当LocalStorage中key对应的属性发生改变时，会同步给所有@LocalStorageProp(key)装饰的数据，@LocalStorageProp(key)本地的修改将被覆盖。

 五，@LocalStorageLink定义

如果我们需要将自定义组件的状态变量的更新同步回LocalStorage，就需要用到@LocalStorageLink。

@LocalStorageLink(key)是和LocalStorage中key对应的属性建立双向数据同步：

1. 本地修改发生，该修改会被写回LocalStorage中；

2. LocalStorage中的修改发生后，该修改会被同步到所有绑定LocalStorage对应key的属性上，包括单向（@LocalStorageProp和通过prop创建的单向绑定变量）、双向（@LocalStorageLink和通过link创建的双向绑定变量）变量。

六， @LocalStorageLink装饰器使用规则说明

 七，@LocalStorageLink变量的传递/访问规则说明

注意：

• 当装饰的数据类型为boolean、string、number类型时，可以观察到数值的变化。

• 当装饰的数据类型为class或者Object时，可以观察到赋值和属性赋值的变化，即Object.keys(observedObject)返回的所有属性。

• 当装饰的对象是array时，可以观察到数组添加、删除、更新数组单元的变化。

• 当@LocalStorageLink(key)装饰的数值改变被观察到时，修改将被同步回LocalStorage对应属性键值key的属性中。

• LocalStorage中属性键值key对应的数据一旦改变，属性键值key绑定的所有的数据（包括双向@LocalStorageLink和单向@LocalStorageProp）都将同步修改。

• 当@LocalStorageLink(key)装饰的数据本身是状态变量，它的改变不仅仅会同步回LocalStorage中，还会引起所属的自定义组件的重新渲染。

 八，双向同步使用

1，创建数据类

export default class YuanZhen {
 
  public name: string = 'YuanZhen';
 
  public age: number = 18;
 
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}

2，在Entry入口创建LocalStorage

import YuanZhen from './bean/YuanZhen';
import ProvideTest from './ProvideTest';
let localState : Record<string,YuanZhen> = { "localState" : new YuanZhen("袁震",18) }
let storage:LocalStorage =new LocalStorage(localState)
 
@Entry(storage)
@Component
struct Index {
  @LocalStorageLink("localState") yuanzhen:YuanZhen =new YuanZhen("袁震1",20)
 
  build() {
    Column(){
      Text("父name:" + this.yuanzhen.name+"\nage:"+this.yuanzhen.age)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
           this.yuanzhen.name ="袁震2"
            this.yuanzhen.age =25
        })
      ProvideTest()
    }
  }
}

3，在子组件使用@LocalStorageLink

import YuanZhen from './bean/YuanZhen'
 
@Component
export default struct ProvideTest {
 
  @LocalStorageLink("localState")yuanZhen:YuanZhen =new YuanZhen("袁震3",30)
 
  build() {
    Row() {
      Column() {
        Text("子name:"+this.yuanZhen.name+"\nage:"+this.yuanZhen.age)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.yuanZhen.name ="袁震子组件"
            this.yuanZhen.age=35
          })
      }.width('100%')
    }.height('100%')
  }
}

运行：

点击父点击子

九，单向同步使用

1，在Entry入口创建LocalStorage

import YuanZhen from './bean/YuanZhen';
import ProvideTest from './ProvideTest';
let localState : Record<string,YuanZhen> = { "localState" : new YuanZhen("袁震",18) }
let storage:LocalStorage =new LocalStorage(localState)
 
function aa(){
  storage.set("localState",new YuanZhen("袁震aa",22))
}
 
@Entry(storage)
@Component
struct Index {
  @LocalStorageProp("localState") yuanzhen:YuanZhen =new YuanZhen("袁震1",20)
 
  build() {
    Column(){
      Text("父name:" + this.yuanzhen.name+"\nage:"+this.yuanzhen.age)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
           this.yuanzhen.name ="袁震2"
            this.yuanzhen.age =25
        })
      ProvideTest()
    }
  }
}

2，子组件

import YuanZhen from './bean/YuanZhen'
 
@Component
export default struct ProvideTest {
 
  @LocalStorageProp("localState")yuanZhen:YuanZhen =new YuanZhen("袁震3",30)
 
  build() {
    Row() {
      Column() {
        Text("子name:"+this.yuanZhen.name+"\nage:"+this.yuanZhen.age)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.yuanZhen.name ="袁震子组件"
            this.yuanZhen.age=35
          })
      }.width('100%')
    }.height('100%')
  }
}

运行：

点击父点击子

因为是单向同步，所以它只改变自身的值，不会改变 LocalStorage 里面的值

如果将父组件修改为：

import YuanZhen from './bean/YuanZhen';
import ProvideTest from './ProvideTest';
let localState : Record<string,YuanZhen> = { "localState" : new YuanZhen("袁震",18) }
let storage:LocalStorage =new LocalStorage(localState)
 
function aa(){
  storage.set("localState",new YuanZhen("袁震aa",22))
}
 
@Entry(storage)
@Component
struct Index {
  @LocalStorageProp("localState") yuanzhen:YuanZhen =new YuanZhen("袁震1",20)
 
  build() {
    Column(){
      Text("父name:" + this.yuanzhen.name+"\nage:"+this.yuanzhen.age)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          aa()
        })
      ProvideTest()
    }
  }
}

运行：

点击父点击子

因为点击父组件，改变的是localstorage里面的值，所以子组件也修改了。

 十，将LocalStorage实例从UIAbility共享到一个或多个视图

在UIAbility中创建LocalStorage，并调用windowStage.loadContent传递LocalStorage

export default class EntryAbility extends UIAbility {
 
  onWindowStageCreate(windowStage: window.WindowStage): void {
  
    //创建localStorage
    let localState : Record<string,YuanZhen> = { "localState" : new YuanZhen("袁震",18) }
    let storage:LocalStorage =new LocalStorage(localState)
 
    windowStage.loadContent('pages/Index',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) ?? '');
    });
  }
 
}

 在Entry中获取LocalStorage

import YuanZhen from './bean/YuanZhen';
import ProvideTest from './ProvideTest';
 
let storage =LocalStorage.GetShared()
 
function aa(){
  storage.set("localState",new YuanZhen("袁震aa",22))
}
 
@Entry(storage)
@Component
struct Index {
  @LocalStorageProp("localState") yuanzhen:YuanZhen =new YuanZhen("袁震1",20)
 
  build() {
    Column(){
      Text("父name:" + this.yuanzhen.name+"\nage:"+this.yuanzhen.age)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          aa()
        })
      ProvideTest()
    }
  }
}