鸿蒙应用开发页面间状态管理之—LocalStorage

最新推荐文章于 2024-07-11 16:14:06 发布

yihanss

最新推荐文章于 2024-07-11 16:14:06 发布

阅读量1.1k

点赞数 28

文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/yihanss/article/details/137881705

版权

概述

LocalStorage是ArkTS为构建页面级别状态变量提供存储的内存内“数据库”,页面级UI状态存储，通常用于UIAbility内、页面间的状态共享。

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

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

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

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

import { TodoListViewModel } from '../viewModel/TodoListViewModel'
import {TodoListItem} from '../common/components/TodoListItem'
import TodoListConstants from '../common/constants/TodoListConstants'
import HarmonyStoreUtils from '../uitils/HarmonyStoreUtils'
let storage:LocalStorage = new LocalStorage({'showSwitchTips2':false});
@Entry(storage)
@Component
export struct TodoList{
  // @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
  @LocalStorageLink('PropA') storLink2: number = 1;
  @LocalStorageLink('PropB') storLinkB: boolean = false;
  @State dataSource:any[] =[]
  build(){
    Column({space:16}){
      Text(`待办${this.storLink2}PropB=${this.storLinkB}`)
      .fontSize(16)
      .fontStyle(FontStyle.Normal)
      .fontWeight(FontWeight.Bold)
      .margin({bottom:20})
      .textAlign(TextAlign.Start)
      .width(TodoListConstants.TITLE_WIDTH)
        .onClick(()=>{
          // HarmonyStoreUtils.testLocalStorage()
          // this.printStorageKeys();
          // // this.showSwitchTipsLink = true;
          // let linkShowSwitchTips2=storage.link('showSwitchTips2')
          // linkShowSwitchTips2.set(true)
          // console.log(`==========showSwitchTipsLink=${this.showSwitchTipsLink}`)
          // HarmonyStoreUtils.testLocalStorage()
          // this.printStorageKeys();
          this.storLink2 += 1
          this.storLinkB = !this.storLinkB
        })


        ForEach(this.dataSource,(item,index)=>{
          TodoListItem({index:item.index+1,name:item.name})
        },item =>JSON.stringify(item))
        Child()
    }.justifyContent(FlexAlign.Start)
    .width(TodoListConstants.FULL_SCREEN_WIDTH)
    .height(TodoListConstants.FULL_SCREEN_WIDTH)

  }

  aboutToAppear(){
    this.dataSource = new TodoListViewModel().loadData()
  }

  printStorageKeys(){
    let keys:IterableIterator<string>= storage.keys();
    console.log(">>>>>>Component LocalStorage>>>>>>");
    for (let key of keys) {
      let showSwitchTips = storage.get(key)
      console.log(`Component>>>>>>${key}:${showSwitchTips}`);
    }
    console.log(`------鸿蒙迭代器的遍历-----`);
    // for (const  [name,value] of keys) { //for IterableIterator<[string, string]>
    //   console.log(`鸿蒙迭代器的遍历>>>>>>name=${name}，value=${value}`);
    //
    // }
    for (const  [name] of keys) {
      console.log(`鸿蒙迭代器的遍历>>>>>>key=${name}`);

    }
    console.log(`------鸿蒙迭代器的遍历-end----`);
  }
}

@Component
struct Child {
  // @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
  @LocalStorageLink('PropA') storLink2: number = 1;
  @LocalStorageLink('PropB') storLink2B: boolean = false;

  build() {
    Button(`Child from LocalStorage ${this.storLink2}${this.storLink2B}`)
      // 更改将同步至LocalStorage中的'PropA'以及Parent.storLink1
      .onClick(() => {
        this.storLink2 += 1
        this.storLink2B =!this.storLink2B
      })
  }
}

2.页面间LocalStorage数据共享实例

EntryAbility中设置要共享的数据


storage:LocalStorage;
para:Record<string, number> = { 'showNumber': 3 };

windowStage.loadContent('pages/MainPage',this.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) ?? '');
});

各page通过LocalStorage.GetShared()获取要共享的LocalStorage
通过第2步获得的storage对象获取存储在LocalStorage中的字段。

这种方法在处理UI界面恢复时特别有用

鸿蒙学习路线图

路线图适合人群：

IT开发人员：想要拓展职业边界，享受新技术带来的溢价红利
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能

HarmonyOS 4.0 APP Developer

在这里插入图片描述

OpenHarmony 5.0 Next视音频

在这里插入图片描述

OpenHarmony 5.0 Next进阶

在这里插入图片描述

OpenHarmony 5.0 Next分布式

在这里插入图片描述

学习资料

内容概要：《鸿蒙零基础入门学习指南》、《鸿蒙开发学习之UI》、《鸿蒙开发学习之Web》、《鸿蒙开发学习之应用模型》

内容特点：条理清晰，含图像化表示更加易懂。

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙零基础入门学习指南》

一、快速入门

适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用，快速了解工程目录的主要文件，熟悉HarmonyOS应用开发流程。

开发准备
构建第一个ArkTS应用（Stage模型）
构建第一个ArkTS应用（FA模型）
构建第一个JS应用（FA模型）

二、开发基础知识

应用程序包基础知识
应用配置文件（Stage模型）
应用配置文件概述（FA模型）

三、资源分类与访问

应用开发过程中，经常需要用到颜色、字体、间距、图片等资源，在不同的设备或配置中，这些资源的值可能不同。

资源分类与访问
创建资源目录和资源文件
资源访问

四、学习ArkTs语言

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力。

初识ArkTS语言
基本语法
状态管理
其他状态管理
渲染控制

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙开发学习之UI》

一、方舟开发框架（ArkUI）概述

二、基于ArkTS声明式开发范式

1、UI开发（ArkTS声明式开发范式）概述
2、开发布局
3、添加组件
4、显示图片
5、使用动画
6、支持交互事件
7、性能提升的推荐方法

三、兼容JS的类Web开发范式

1、概述
2、框架说明
3、构建用户界面
4、常见组件开发指导
5、动效开发指导
6、自定义组件

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙开发学习之Web》

Web组件概述

使用Web组件加载页面

设置基本属性和事件

设置深色模式
上传文件
在新窗口中打开页面
管理位置权限

在应用中使用前端页面JavaScript

应用侧调用前端页面函数
前端页面调用应用侧函数
建立应用侧与前端页面数据通道
管理页面跳转及浏览记录导航
管理Cookie及数据存储
自定义页面请求响应
使用Devtools工具调试前端页面

ArkTS语言基础类库概述

并发

并发概述
使用异步并发能力进行开发
使用多线程并发能力
容器类库
XML生成、解析、与转换
通知

窗口管理

窗口开发概述
管理应用窗口（Stage模型）
管理应用窗口（FA模型）

WebGL

概述
WebGL开发指导

媒体

媒体应用开发概念
图片

安全

访问控制
ohos.permission.USE_BLUETOOTH
ohos.permission.DISCOVER_BLUETOOTH
ohos.permission.MANAGE_BLUETOOTH
ohos.permission.INTERNET
ohos.permission.INTERNET
…

网络与连接

网络管理
IPC与RPC通信

电话服务

电话服务开发概述
跳转拨号页面
获取当前蜂窝网络信号信息

数据管理

数据管理概述
应用数据持久化
场景介绍
运作机制
约束限制
接口说明
…

文件管理

文件管理概述
应用文件
用户文件
分布式文件系统

后台任务管理

后台任务总体概述
短时任务
长时任务
延时任务
代理提醒

设备管理

USB服务
位置服务
传感器
分布式跟踪开发指导
错误管理
…

在这里插入图片描述

国际化

国际化开发概述
Intl开发指导
I18n开发指导

应用测试

自动化测试框架使用指南

Native API相关指导

Native API在应用工程中的使用指导
Drawing开发指导
Rawfile开发指导
NativeWindow 开发指导
…

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙开发学习之应用模型》

应用模型概述

应用模型的构成要素
应用模型解读

Stage模型开发指导

Stage模型开发概述
Stage模型应用组件

FA模型开发指导

FA模型开发概述
FA模型应用组件配置
进程模型
线程模型

领取方式：扫描下方二维码即可免费领取！！！

yihanss

关注

28
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
鸿蒙应用开发页面间状态管理之—LocalStorage

1、UI开发（ArkTS声明式开发范式）概述2、开发布局3、添加组件4、显示图片5、使用动画6、支持交互事件7、性能提升的推荐方法设置深色模式上传文件在新窗口中打开页面管理位置权限并发概述使用异步并发能力进行开发使用多线程并发能力容器类库XML生成、解析、与转换通知应用模型的构成要素应用模型解读。
复制链接

扫一扫