鸿蒙-10（LocalStorage）

LocalStorage

LocalStorage：代表的页面级别的存储，你可以理解为LocalStorage就是内存数据库。你可以往里面存放数据。

LocalStorage和AppStorage都是内存级别的存储方案。唯一不同的在于作用范围。

LocalStorage解决问题:

1. 在同一个EneryAlibity中多个页面可以实现数据的共享。不同EneryAlibity无法实现数据共享。
2. 实现一个页面中定义了存储的数据，在他的子组件中都可以共享这个内存的数据

1.组件实例化

创建LocalStorage实例：通过构造函数来初始化storage存储的数据

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

@Entry
@Component
struct Page08_Storage {
}

创建LocalStorage实例：通过实例方法来初始化storage存储的数据

let storage: LocalStorage = new LocalStorage();
// setOrCreate 属性存在就覆盖，不存在就创建该属性
storage.setOrCreate('PropA',47)

@Entry
@Component
struct Page08_Storage {
}

2.绑定storage

let storage: LocalStorage = new LocalStorage();
storage.setOrCreate('PropA',47)

// 把storage交给页面
@Entry(storage)
@Component
struct Page08_Storage {

}

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

3.获取数据

let storage: LocalStorage = new LocalStorage();
storage.setOrCreate('PropA',47)

// 把storage交给页面
@Entry(storage)
@Component
struct Page08_Storage {
  @State message: string = 'Page08_Storage';
  // 从内存中获取页面级别存储，并将获取到的值赋值给当前页面的变量，如果获取不到则给本地PropAProp、PropALink初始化值
  @LocalStorageProp("PropA") PropAProp:number=1;
  @LocalStorageLink("PropA") PropALink:number=2;

  build() {
    Column() {
     Text(this.message)
       .fontSize(30)
       .fontColor(Color.Red)
      Text(this.PropAProp.toString())
        .fontSize(26)
        .onClick(()=>{
          // 该处只是修改当前页面变量的存储
          this.PropAProp=60
        })
      Text(this.PropALink.toString())
        .fontSize(26)
        .fontColor(Color.Orange)
        .onClick(()=>{
          // 该处修改LocalStorage中的数据
          this.PropALink=100;
        })
    }
    .height('100%')
    .width('100%')
  }
}

• LocalStorageProp:单向修改，只是初始化的时候将LocalStorageProp值赋值给对应的变量，不会同步到LocalStorage中

• LocalStorageLink:双向修改，修改LocalStorage中数据，@LocalStorageLink变量装饰器与LocalStorage中的'Prop'属性建立双向绑定

4.子组件获取数据

@Component子组件自动获得对Parent LocalStorage实例的访问权限。

@Component
export struct StorageChildren{
  @LocalStorageProp("PropA") PropAProp:number=1;
  @LocalStorageLink("PropA") PropALink:number=2;
}

5.页面间数据共享

在多个页面中共享，可以在所属UIAbility中创建全局LocalStorage实例，并调用windowStage.loadContent

（1）设置全局storage

// 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);
  }
}

先给Ability设置一个页面存储对象，这样才能保证这个Ability下面所有的子页面都可以共享这个storage

注意事项：这个功能演示无法在预览器实现，必须要模拟器或者真机来实现。因需要用到全局window窗口(Ability)，预览器只能执行当前页面，无法执行窗口中的方法

（2）页面中获取storage

let storage=LocalStorage.getShared();
@Entry(storage)
@Component
struct Index {

• 这样在页面中就可以通过prop装饰器来获取数据
• 也可以通过link装饰器来修改数据