鸿蒙Harmony--LocalStorage--页面级UI状态存储详解

这篇具有很好参考价值的文章主要介绍了鸿蒙Harmony--LocalStorage--页面级UI状态存储详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

目录

一,定义

二,@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变量装饰器 说明
装饰器参数 key:常量字符串,必填(字符串需要有引号)。
允许装饰的变量类型 Object、class、string、number、boolean、enum类型,以及这些类型的数组。
类型必须被指定,建议和LocalStorage中对应属性类型相同,否则会发生类型隐式转换,从而导致应用行为异常。不支持any,不允许使用undefined和null。
同步类型 单向同步:从LocalStorage的对应属性到组件的状态变量。组件本地的修改是允许的,但是LocalStorage中给定的属性一旦发生变化,将覆盖本地的修改。
被装饰变量的初始值 必须指定,如果LocalStorage实例中不存在属性,则作为初始化默认值,并存入LocalStorage中。

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

传递/访问 说明
从父节点初始化和更新 禁止,@LocalStorageProp不支持从父节点初始化,只能从LocalStorage中key对应的属性初始化,如果没有对应key的话,将使用本地默认值初始化。
初始化子节点 支持,可用于初始化@State、@Link、@Prop、@Provide。
是否支持组件外访问 否。

注意:

  • 当装饰的数据类型为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变量装饰器 说明
装饰器参数 key:常量字符串,必填(字符串需要有引号)。
允许装饰的变量类型 Object、class、string、number、boolean、enum类型,以及这些类型的数组。
类型必须被指定,建议和LocalStorage中对应属性类型相同,否则会发生类型隐式转换,从而导致应用行为异常。不支持any,不允许使用undefined和null。
同步类型 双向同步:从LocalStorage的对应属性到自定义组件,从自定义组件到LocalStorage对应属性。
被装饰变量的初始值 必须指定,如果LocalStorage实例中不存在属性,则作为初始化默认值,并存入LocalStorage中。

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

传递/访问 说明
从父节点初始化和更新 禁止,@LocalStorageLink不支持从父节点初始化,只能从LocalStorage中key对应的属性初始化,如果没有对应key的话,将使用本地默认值初始化。
初始化子节点 支持,可用于初始化@State、@Link、@Prop、@Provide。
是否支持组件外访问 否。

注意:

  • 当装饰的数据类型为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%')
  }
}

运行:

鸿蒙Harmony--LocalStorage--页面级UI状态存储详解,鸿蒙开发,harmonyos,华为,TS点击父鸿蒙Harmony--LocalStorage--页面级UI状态存储详解,鸿蒙开发,harmonyos,华为,TS点击子鸿蒙Harmony--LocalStorage--页面级UI状态存储详解,鸿蒙开发,harmonyos,华为,TS

九,单向同步使用

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%')
  }
}

运行:

鸿蒙Harmony--LocalStorage--页面级UI状态存储详解,鸿蒙开发,harmonyos,华为,TS点击父鸿蒙Harmony--LocalStorage--页面级UI状态存储详解,鸿蒙开发,harmonyos,华为,TS点击子鸿蒙Harmony--LocalStorage--页面级UI状态存储详解,鸿蒙开发,harmonyos,华为,TS

因为是单向同步,所以它只改变自身的值,不会改变 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()
    }
  }
}

运行:

鸿蒙Harmony--LocalStorage--页面级UI状态存储详解,鸿蒙开发,harmonyos,华为,TS点击父鸿蒙Harmony--LocalStorage--页面级UI状态存储详解,鸿蒙开发,harmonyos,华为,TS点击子鸿蒙Harmony--LocalStorage--页面级UI状态存储详解,鸿蒙开发,harmonyos,华为,TS

因为点击父组件,改变的是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文章来源地址https://www.toymoban.com/news/detail-808072.html

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()
    }
  }
}

到了这里,关于鸿蒙Harmony--LocalStorage--页面级UI状态存储详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 鸿蒙Harmony--状态管理器--@Prop详解

    纵横千里独行客,何惧前路雨潇潇。夜半浊酒慰寂寞,天明走马入红尘。且将新火试新茶,诗酒趁年华。青春以末,壮志照旧,生活以悟,前路未明。时间善变,可执着翻不了篇。时光磨我少年心,却难灭我少年志,壮士活古不活皮。加油。 目录 一,定义 二,装饰器使用规

    2024年02月01日
    浏览(67)
  • 鸿蒙Harmony-页面路由(router)详解

    慢慢理解世界,慢慢更新自己,希望你的每一个昨天,今天,和明天都会很快乐,你知道的,先好起来的从来都不是生活,而是你自己  目录 一,定义 二,页面跳转 2.1使用router.pushUrl 2.2 使用router.replaceUrl 2.3 使用Single模式 2.4 带参数的跳转  三,页面返回  3.1返回到上一个页

    2024年01月20日
    浏览(47)
  • 鸿蒙Harmony--状态管理器-@Observed装饰器和@ObjectLink装饰器详解

     经历的越多,越喜欢简单的生活,干净的东西,清楚的感觉,有结果的事,和说到做到的人。把圈子变小,把语放缓,把心放宽,用心做好手边的事儿,该有的总会有的! 目录 一,定义 二,装饰器说明 三,变量的传递/访问规则说明  四,使用 1,简单对象的使用 2,嵌套对

    2024年02月01日
    浏览(55)
  • 鸿蒙Harmony--状态管理器--@Provide装饰器和@Consume装饰器详解

    今天是1月11日号星期四,农历腊月初一,辞旧的岁月里,愿你守得云开、终见月明,迎新的时光中,愿你心御寒冬、顺遂无忧,岁末冬深,希望接下来的日子里足够幸运,攒足勇气、信心和运气,去迎接新的一年,去遇见更好的自己! 目录 一,定义 二,特性 三,装饰器说明

    2024年02月01日
    浏览(51)
  • 鸿蒙Harmony应用开发—ArkTS-全局UI方法(警告弹窗)

    显示警告弹窗组件,可设置文本内容与响应回调。 说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 本模块功能依赖UI的执行上下文,不可在UI上下文不明确的地方使用,参见UIContext说明。 从API version 10开始,可以通过使用U

    2024年04月26日
    浏览(38)
  • 鸿蒙:Harmony开发基础知识详解

    工欲善其事,必先利其器。 上一篇博文实现了一个 \\\"Hello Harmony\\\" 的Demo,今天这篇博文就以 \\\"Hello Harmony\\\"  为例,以官网开发文档为依据,从鸿蒙开发主要的几个方面入手,详细了解一下鸿蒙开发所需的基础知识。 HarmonyOS提供了一套UI开发框架,即 方舟开发框架 ( ArkUI框架 )

    2024年02月05日
    浏览(52)
  • 【Harmony OS】【JAVA UI】鸿蒙智能手表开发,如何判断未联网

     在手表开发过程中,手表是否连接网络怎么判断呢?下面我们就来学习一下 【问题描述】 harmony智能手表开发,如何判断未联网(包括 wifi 和 数据业务) 【解决方案】 鸿蒙暂无判断联网的相关API。 我们可以调用http的网络请求的接口,比如下载前,可以先get或者post的接口

    2024年02月16日
    浏览(65)
  • 鸿蒙开发-UI-动画-页面内动画

    鸿蒙开发-UI-组件2 鸿蒙开发-UI-组件3 鸿蒙开发-UI-气泡/菜单 鸿蒙开发-UI-页面路由 鸿蒙开发-UI-组件导航-Navigation 鸿蒙开发-UI-组件导航-Tabs 鸿蒙开发-UI-图形-图片 鸿蒙开发-UI-图形-绘制几何图形 鸿蒙开发-UI-图形-绘制自定义图形 文章目录 前言 一、概述 二、页面内动画 1.布局更

    2024年03月11日
    浏览(53)
  • Vue项目保持用户登录状态(localStorage + vuex 刷新页面后状态依然保持)

            在前端项目开发中,实现用户的登陆注册功能时常常会有一个问题,那就是我们设置的登录状态,在浏览器页面刷新后就消失了,这其实只是因为我们没有保存用户状态。 这里小马演示使用的是 localStorage   +   vuex 方法(其他诸如 sessionStorage、cookie 等用法相同,

    2023年04月08日
    浏览(37)
  • HarmonyOS鸿蒙开发指南:UI开发 基于ArkTS的声明式开发范式 声明式UI开发实例 页面布局与连接

    目录 构建食物数据模型 构建食物列表List布局 构建食物分类Grid布局  页面跳转与数据传递

    2024年02月03日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包