当前位置: 首页 > news >正文

鸿蒙Harmony-UIAbility内状态-LocalStorage详细介绍

鸿蒙Harmony-UIAbility内状态-LocalStorage详细介绍

1.1 Localstorage的概念

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

1.2 LocalStorage单个页面的使用方法

1.2.1 单个页面的数据状态存储方法

  1. 准备一个共享数据,键值对的方式存储

  2. 创建LocalStorage实例:const storage = new LocalStorage({key:value})

  3. 单向 @LocalStorageProp(‘user’)组件内可变

  4. 双向 #LocalStorageLink(‘user’)全局均可变

1.2.2 案例演示

  1. 准备共享数据
const data:Record<string,string> = {
  'uname':'公孙离',
  'age':'18'
}

  1. 创建一个storage实例
const storage = new LocalStorage(data)
  1. 使用共享数据库
1.@Entry(storage)
//表示我要从共享数据库中取出uname字段   具体需要取出什么字段根据自己需求即可
 @LocalStorageLink('uname')
 //给取出的字段取一个别名,需要赋初始值。因为可能拿不到
  message: string = ''
  1. 具体代码实现
const data:Record<string,string> = {
  'uname':'公孙离',
  'age':'18'
}
const storage = new LocalStorage(data)
@Entry(storage)
@Component
struct TestLocalStorage03 {
  @LocalStorageLink('uname')
  message:string = ''

  build() {
   Column() {
  Text(this.message)
     Button('改变父组件的信息')
       .onClick(()=>{
         this.message = '孙尚香'
       })
     child001()
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct child001 {
  @LocalStorageLink('uname')
  message:string = ''
  build() {
    Column(){
      Text('-------------------------------------------')

      Text(this.message)
      Button('改变子组件的状态')
        .onClick(()=>{
          this.message = '西施'
        })
    }
  }
}

1.2.3 效果展示

img

1.3 LocalStorage多个页面共享UIAbility的使用方法

1.3.1 多个页面的使用方法

  1. 依旧是准备共享数据,放置在设置当前应用的加载页面(UIAbility共享),只要是当前windowstage内的界面,都可以共享这份数据
  2. 在设置应用的加载页面创建storage实例
  3. 通过LocalStorage里面的方法getShared获取数据

1.3.2 案例演示

  1. 准备数据
  const data:Record<string,string> = {
      'uname':'公孙离',
      'age':'18',
    }
    const storage = new LocalStorage(data)
  1. 创建storage实例,将storage传递给页面
    1.const storage = new LocalStorage(data)
    2.  windowStage.loadContent('pages/10/TestLocalStorage03',storage);
  1. 接收数据
const storage = LocalStorage.getShared()
//其他步骤同单个页面传输吗,这里就不再叙述
  1. 完整代码展示
  • UIAbility内代码
  onWindowStageCreate(windowStage: window.WindowStage): void {
    const data:Record<string,string> = {
      'uname':'公孙离',
      'age':'18',
    }
    const storage = new LocalStorage(data)
    // //只要是当前windowStage内的界面,都可以共享这份数据
    windowStage.loadContent('pages/10/TestLocalStorage03',storage);
  }
  • 页面1
// const data:Record<string,string> = {
import { router } from '@kit.ArkUI'

//   'uname':'公孙离',
//   'age':'18'
// }
const storage = LocalStorage.getShared()

@Entry(storage)
@Component
struct TestLocalStorage03 {
  @LocalStorageLink('uname')
  message: string = ''

  build() {
    Column() {
      Text(this.message)
      Button('改变父组件的信息')
        .onClick(() => {
          this.message = '孙尚香'
        })
      child001()

    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct child001 {
  @LocalStorageLink('uname')
  message: string = ''

  build() {
    Column() {
      Text('-------------------------------------------')

      Text(this.message)
      Button('改变子组件的状态')
        .onClick(() => {
          this.message = '西施'
        })
      Button('切换页面')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/10/TextLocalStorage2'
          })
        })
    }
  }
}
  • 页面2
import { router } from '@kit.ArkUI'

const storage = LocalStorage.getShared()
@Entry(storage)
@Component
struct TextLocalStorage2 {
  @LocalStorageLink('uname')
  message: string = ''

  build() {
    Column() {
      Text(this.message)
      Button('改变信息')
        .onClick(()=>{
          this.message = '刘备'
        })

      Button('back')
        .onClick(()=>{
          router.back()
        })
    }
    .height('100%')
    .width('100%')
  }
}

1.3.3 效果展示

img

相关文章:

  • 【数据结构】 栈和队列
  • Unity DeepSeek API 聊天接入教程(0基础教学)
  • 聊一聊vue如何实现角色权限的控制的
  • JavaBean
  • 【Elasticsearch入门到落地】8、RestClient操作索引库-基础介绍及导入demo
  • 【OpenCV】入门教学
  • Spring 和 Spring MVC 的关系是什么?
  • python知识和项目经验
  • 案例-06.部门管理-根据ID查询
  • Python基于Flask的豆瓣电影数据分析可视化系统(附源码,文档说明)
  • 国产编辑器EverEdit - “切换文件类型”的使用场景
  • 力扣 470. 用 Rand7() 实现 Rand10() 拒绝采样 等概率随机数生成
  • 2.【BUUCTF】[极客大挑战 2020]Roamphp1-Welcome
  • 网易雷火游戏测试开发1面面经(带脑图)
  • 权限五张表
  • React入门 - 0.React简介
  • snort3.0-ubuntu18.04 64入侵检测安装与使用
  • 总结前端常用数据结构 之 数组篇【JavaScript -包含常用数组方法】
  • MYSQL下载安装及使用
  • 四、敏捷方法论:敏捷开发中的关键实践
  • 夜读丨怀念那个写信的年代
  • 亮剑浦江丨上海网信部门处罚一批医疗服务类互联网企业,三大类问题值得关注
  • 俄罗斯称已收复库尔斯克州,普京发表讲话
  • 只在上海!德国剧团新作亚洲首演:一张古典与流行的声音网络
  • 巴基斯坦最近“比较烦”:遣返阿富汗人或致地区局势更加动荡
  • 吏亦有道|秦汉的发明家与技术传承