LocalStorage

LocalStorage 是 ArkTs 为页面级别状态变量提供存储的存储库

页面之间通过 getShared()方法来实现跨页面

说明

• 此功能预览器里面看不了只能在模拟器或者真机使用

分类

LocalStorageProp

只能显示 不能改变 要是用了它 ,其他页面改变值.LocalStorage 里面不会改变

LocalStorageLink

能改变值

观察变化

• 一句话 概括:它只能观察到第一层的变化

限制

注意

1. 存储的数据属性 必须是字符串类型

2. 存储的数据不能使 Function

3. LocalStorage 创建后，命名属性的类型不可更改

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

5. 不能跨 ability,关闭 APP 也保存不了

使用方法

在 Ability 中添加引用

• (1) 设置类型

// 1 设置类型

interface DallAll{
    name:string
    age:number
}

• (2) 页面引用

    // 2. 页面引用
    para:Record<string,number> = {'PropA':26}
    dataAll:DallAll = {'name':"测试数据","age":20}
    storage: LocalStorage =  new LocalStorage(this.para)
    storage2: LocalStorage =  new LocalStorage(this.dataAll)

• (3) 页面挂载

页面挂载只能写在onWindowStageCreate 函数里面

    onWindowStageCreate(windowStage: window.WindowStage): void {
        // Main window is created, set main page for this ability
        hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

        // 3 . 页面挂载
        windowStage.loadContent('pages/Index', this.storage,(error)=>{
            if(error.code){
                return
            }
            console.info("页面加载成功")
        });
        // 添加第二个
        windowStage.loadContent('pages/Index', this.storage2,(error)=>{
            if(error.code){
                return
            }
            console.info("页面加载成功2")
        });
    }

• (4) ability 全部

import {
  AbilityConstant,
  ConfigurationConstant,
  UIAbility,
  Want,
} from "@kit.AbilityKit";
import { hilog } from "@kit.PerformanceAnalysisKit";
import { window } from "@kit.ArkUI";

// 1 设置类型

interface DallAll {
  name: string;
  age: number;
}

export default class EntryAbility extends UIAbility {
  // 2. 页面引用
  para: Record<string, number> = { PropA: 26 };
  dataAll: DallAll = { name: "测试数据", age: 20 };
  storage: LocalStorage = new LocalStorage(this.para);
  storage2: LocalStorage = new LocalStorage(this.dataAll);
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    this.context
      .getApplicationContext()
      .setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
    hilog.info(0x0000, "testTag", "%{public}s", "Ability onCreate");
  }

  onDestroy(): void {
    hilog.info(0x0000, "testTag", "%{public}s", "Ability onDestroy");
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, "testTag", "%{public}s", "Ability onWindowStageCreate");

    // 3 . 页面挂载
    windowStage.loadContent("pages/Index", this.storage, (error) => {
      if (error.code) {
        return;
      }
      console.info("页面加载成功");
    });
    // 添加第二个
    windowStage.loadContent("pages/Index", this.storage2, (error) => {
      if (error.code) {
        return;
      }
      console.info("页面加载成功2");
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, "testTag", "%{public}s", "Ability onWindowStageDestroy");
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, "testTag", "%{public}s", "Ability onForeground");
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, "testTag", "%{public}s", "Ability onBackground");
  }
}

页面里面使用

• (1) @Entry 里面使用 storage 挂载,LocalStorage.getShared() 来获取

• (2) 通过@LocalStorageLink 来赋值

import { router } from '@kit.ArkUI';
@Entry({storage:LocalStorage.getShared()})
@Component
struct Index2 {
    @LocalStorageLink('PropA') propA: number = 2;
    @LocalStorageLink('name') name: string = "";
    @LocalStorageLink('age') age: number = 2;
    build() {
        Row() {
            Column() {
                Text(`${this.propA}`).fontSize(50).fontWeight(FontWeight.Bold)
                Text(`${this.name}`).fontSize(50).fontWeight(FontWeight.Bold)
                Text(`${this.age}`).fontSize(50).fontWeight(FontWeight.Bold)
                Button("Change Name").onClick(() => {this.name = '彻底改变了结果';})
                Button("Change Age").onClick(() => {this.age = 600;})
                Button("Change propA").onClick(() => {this.propA = 100;})
                Button("Back Index").onClick(() => {
                    router.pushUrl({
                        url: 'pages/Index'
                    })
                })
            }.width('100%')
        }
    }
}