鸿蒙应用开发-应用状态存储（LocalStorage、AppStorage..）

最新推荐文章于 2024-04-10 16:14:51 发布
最新推荐文章于 2024-04-10 16:14:51 发布
阅读量1.1k 收藏 19
点赞数 23
文章标签： harmonyos 华为 鸿蒙 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56255097/article/details/136513757
版权
1. UIAbility内状态-LocalStorage

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

  • 创建 LocalStorage 实例：const storage = new LocalStorage({ key: value })
  • 单向 @LocalStorageProp('user') 组件内可变
  • 双向 @LocalStorageLink('user') 全局均可变
class User {
  name?: string
  age?: number
}
const storage = new LocalStorage({
  user: { name: 'jack', age: 18 }
})

@Entry(storage)
@Component
struct Index {
  @LocalStorageProp('user')
  user: User = {}

  build() {
    Column({ space: 15 }){
      Text('Index：')
      Text(this.user.name + this.user.age)
      Divider()
      ChildA()
      Divider()
      ChildB()
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct ChildA {
  @LocalStorageProp('user')
  user: User = {}

  build() {
    Column({ space: 15 }){
      Text('ChildA：')
      Text(this.user.name + this.user.age)
        .onClick(()=>{
          this.user.age ++
        })
    }
  }
}

@Component
struct ChildB {
  @LocalStorageLink('user')
  user: User = {}

  build() {
    Column({ space: 15 }){
      Text('ChildB：')
      Text(this.user.name + this.user.age)
        .onClick(()=>{
          this.user.age ++
        })
    }
  }
}

2）页面间共享

  • 在 UIAbility 创建 LocalStorage 通过 loadContent 提供给加载的窗口

在页面使用 const storage = LocalStorage.GetShared() 得到实例，通过 @Entry(storage) 传入页面

entryAbility/EntryAbility.ts


+  storage = new LocalStorage({
+    user: { name: 'jack', age: 18 }
+  })

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

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

models/index.ets

export class User {
  name?: string
  age?: number
}

pages/Index.ets

import { User } from '../models'
const storage = LocalStorage.GetShared()

@Entry(storage)
@Component
struct Index {
  @LocalStorageProp('user')
  user: User = {}

  build() {
    Column({ space: 15 }) {
      Text('Index：')
      Text(this.user.name + this.user.age)
        .onClick(()=>{
          this.user.age ++
        })
      Navigator({ target: 'pages/OtherPage' }){
        Text('Go Other Page')
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

pages/OtherPage.ets

import { User } from '../models'
const storage = LocalStorage.GetShared()

@Entry(storage)
@Component
struct OtherPage {
  @LocalStorageLink('user')
  user: User = {}

  build() {
    Column({ space: 15 }) {
      Text('OtherPage：')
      Text(this.user.name + this.user.age)
        .onClick(()=>{
          this.user.age ++
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

注意

  • 页面间共享需要要模拟器测试
  • 应用逻辑中使用参考 链接

2. 应用状态-AppStorage

AppStorage 是应用全局的UI状态存储，是和应用的进程绑定的，由UI框架在应用程序启动时创建，为应用程序UI状态属性提供中央存储。

如果是初始化使用 AppStorage.SetOrCreate(key,value)
单向 @StorageProp('user') 组件内可变
双向 @StorageLink('user') 全局均可变
1）通过UI装饰器使用

import { User } from '../models'

AppStorage.SetOrCreate<User>('user', { name: 'jack', age: 18 })

@Entry
@Component
struct Index {
  @StorageProp('user')
  // 可忽略，编辑器类型错误
  user: User = {}

  build() {
    Column({ space: 15 }) {
      Text('Index：')
      Text(this.user.name + this.user.age)
        .onClick(() => {
          this.user.age++
        })
      Divider()
      ChildA()
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct ChildA {
  @StorageLink('user')
  user: User = {}

  build() {
    Column({ space: 15 }){
      Text('ChildA：')
      Text(this.user.name + this.user.age)
        .onClick(()=>{
          this.user.age ++
        })
    }
  }
}

2）通过逻辑使用

  • AppStorage.Get<ValueType>(key) 获取数据
  • AppStorage.Set<ValueType>(key,value) 覆盖数据
  • const link: SubscribedAbstractProperty<ValueType> = AppStorage.Link(key)覆盖数据
    • link.set(value) 修改
    • link.get() 获取
import promptAction from '@ohos.promptAction'
import { User } from '../models'

AppStorage.SetOrCreate<User>('user', { name: 'jack', age: 18 })

@Entry
@Component
struct Index {
  @StorageLink('user')
  user: User = {}

  build() {
    Column({ space: 15 }) {
      Text('Index：')
      Text(this.user.name + this.user.age)
        .onClick(() => {
          this.user.age++
        })
      Divider()
      Text('Get()')
        .onClick(() => {
          // 仅获取
          const user = AppStorage.Get<User>('user')
          promptAction.showToast({
            message: JSON.stringify(user)
          })
        })
      Text('Set()')
        .onClick(() => {
          // 直接设置
          AppStorage.Set<User>('user', {
            name: 'tom',
            age: 100
          })
          // 观察页面更新没
        })
      Text('Link()')
        .onClick(() => {
          // 获取user的prop
          const user: SubscribedAbstractProperty<User> = AppStorage.Link('user')
          user.set({
            name: user.get().name,
            // 获取后修改
            age: user.get().age + 1
          })
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

3. 状态持久化-PersistentStorage

PersistentStorage 将选定的 AppStorage 属性保留在设备磁盘上。

DETAILS
UI和业务逻辑不直接访问 PersistentStorage 中的属性，所有属性访问都是对 AppStorage 的访问，AppStorage 中的更改会自动同步到 PersistentStorage。

WARNING
  • 支持：number, string, boolean, enum 等简单类型;
  • 如果：要支持对象类型，可以转换成json字符串
  • 持久化变量最好是小于2kb的数据，如果开发者需要存储大量的数据，建议使用数据库api。

1）简单数据类型的持久化，和获取和修改

import { User } from '../models'

PersistentStorage.PersistProp('count', 100)

@Entry
@Component
struct Index {
  @StorageLink('count')
  count: number = 0

  build() {
    Column({ space: 15 }) {
      Text(this.count.toString())
        .onClick(() => {
          this.count++
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

2）复杂数据类型的持久化，和获取和修改

import promptAction from '@ohos.promptAction'
import { User } from '../models'

PersistentStorage.PersistProp('userJson', `{ "name": "jack", "age": 18 }`)

@Entry
@Component
struct Index {
  @StorageProp('userJson')
  @Watch('onUpdateUser')
  userJson: string = '{}'
  @State
  user: User = JSON.parse(this.userJson)

  onUpdateUser() {
    this.user = JSON.parse(this.userJson)
  }

  build() {
    Column({ space: 15 }) {
      Text('Index：')
      Text(this.user.name + this.user.age)
        .onClick(() => {
          this.user.age++
          // 修改
          AppStorage.Set('userJson', JSON.stringify(this.user))
        })
      Divider()
      Text('Get()')
        .onClick(() => {
          // 获取
          const user = AppStorage.Get<string>('userJson')
          promptAction.showToast({ message: user })
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

4. 设备环境-Environment

开发者如果需要应用程序运行的设备的环境参数，以此来作出不同的场景判断，比如多语言，暗黑模式等，需要用到Environment 设备环境查询。
Environment 的所有属性都是不可变的（即应用不可写入），所有的属性都是简单类型。

最后资料分享

如果你还没有掌握鸿蒙，现在想要在最短的时间吃透它，大家可以参考一下这份鸿蒙学习路线图以及《鸿蒙（HarmonyOS）开发学习笔记》，内容包含ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

【扫描下方二维码即可免费领取！！】

在这里插入图片描述

快速入门

  • 开发准备
  • 构建第一个ArkTS应用（Stage模型）
  • 构建第一个ArkTS应用（FA模型）
  • 构建第一个JS应用（FA模型）
    在这里插入图片描述

开发基础知识

  • 应用程序包基础知识
  • 应用配置文件（Stage模型）
  • 应用配置文件概述（FA模型）
    在这里插入图片描述

资源分类与访问

  • 资源分类与访问
  • 创建资源目录和资源文件
  • 资源访问
    在这里插入图片描述

学习ArkTs语言

  • 初识ArkTS语言
  • 基本语法
  • 状态管理
  • 其他状态管理
  • 渲染控制
    在这里插入图片描述

基于ArkTS声明式开发范式

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

在这里插入图片描述

兼容JS的类Web开发范式

  • 概述
  • 框架说明
  • 构建用户界面
  • 常见组件开发指导
  • 动效开发指导
  • 自定义组件
    在这里插入图片描述

Web组件

  • 概述
  • 设置基本属性和事件
  • 并发
  • 窗口管理
  • WebGL
  • 媒体
  • 安全
  • 网络与连接
  • 电话服务
  • 数据管理
  • …
    在这里插入图片描述

应用模型

  • 概述
  • Stage模型开发指导
  • FA模型开发指导
    在这里插入图片描述
有需要完整鸿蒙学习资料的朋友，扫描下方二维码即可免费领取！！！
Android女王
关注
  • 23
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue、uniapp使用localstorage完成历史搜索功能
qq_42642780的博客
06-09 5844
本人小白最近在学习vue和uniapp，现在在做一个魅族商城的项目，做到了历史搜索这一块，想分享一下，希望大家可以指出错误！！！（博客处女作） 说明：这里主要说的是点击搜索按钮，然后你新输入的文本就会出现在下面搜索历史的第一个，最多可以添加8个，大于8个则删除最后一个元素，其他功能这里不说明，可以私聊我一起学习哈 vue文件中的父组件 因为这里不是在同一个组件实现 <view class="right-text" " @click="search">搜索</view> metho
前端项目-js-data-localstorage.zip
09-03
前端项目-js-data-localstorage,用于JS数据的本地存储适配器。
鸿蒙Harmony--LocalStorage--页面级UI状态存储详解
袁震的博客
01-13 1583
走的太急疼的是脚，逼的太紧累的是心，很多时候，慢一点也没关系，多给自己一些耐心和等待，保持热爱，当下即是未来，生活自有安排!
【开发者说】HarmonyOS实践之应用状态变量共享
爱蹦跶的全栈大A阿
01-12 165
通过这次实践，熟悉了不同的状态变量在应用中的不同应用范围，选用合适的状态变量会让应用开发简单快捷，本地页面内部使用LocalStorage保存数据，应用页面间通过AppStorage传递信息，PersistentStorage可以持久化存储数据信息。平时在开发的过程中，我们会在应用中共享数据，在不同的页面间共享信息。同样，在第二个页面Second.ets中把AppStorage中的属性值改为12，我们发现在Index.ets和First.ets中，对应的属性值也都变为了改后的值。持久化存储UI状态。
【鸿蒙开发】应用状态管理LocalStorage，AppStorage，PersistentStorage
d312697510的博客
04-10 922
鸿蒙开发arkts，应用状态管理，LocalStorage页面级UI状态存储，AppStorage应用全局的UI状态存储，PersistentStorage持久化存储
APP PC localStorage 兼容写法
weixin_46382390的博客
10-07 441
特定情况下，localStorage在移动端无效，使用plus.storage。plus.storage有时PC无效，所以： const user_info = (window.plus && JSON.parse(plus.storage.getItem('user_info'))) || JSON.parse(localStorage.getItem('user_info'))
Vuejs结合html5 localstorage本地缓存开发webapp项目源码
CodingNoob
05-25 1841
Vuejs结合html5 localstorage本地缓存开发webapp项目源码，项目可以记录每次存储的数据，并统计历史记录、本月记录、最高记录等等。点击在线预览github仓库地址：https://github.com/zhongyoucong/app/tree/master/app2.0苹果端可以保存到桌面，效果图如下： js代码//日期格式化函数 Date.prototype.fo
uniapp本地存储的几种方式localStorage
nalanxiaoxiao2011的博客
02-02 1971
前端本地存储 localStorage 遇到的问题
uniapp没有localstorage可使用uni.setStorage
浮游的博客
06-06 1311
WEB应用的快速发展，本地存储一些数据也成为一种重要的需求，实现的方案也有很多，最普通的就是cookie了，大家也经常都用，但是cookie的缺点是显而易见的，其他的方案比如：IE6以上的userData，Firefox下面的globalStorage，以及Flash的本地存储，除了Flash之外，其他的几个都有一些兼容性的问题。// 获取指定key 本地存储数据的值。// 删除指定key 本地存储的值。1、将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
chrome-localStorage-shim:chrome-localStorage-shim为chrome.storage.local提供了一个薄仿真层，以在打包的chrome应用程序环境中实现window.localStorage
05-18
chrome-localStorage-shim为chrome.storage.local提供了一个薄仿真层，以在打包的chrome应用程序环境中实现window.localStorage。 在打包的应用程序环境中，由于设计的原因，很多事情受到限制。 但是许多库和框架...
vuex-persistedstate-使用localStorage保持Vuex状态。-Vue.js开发
05-27
vuex-persistedstate坚持并重新加载页面之间的Vuex状态。 要求Vue.js（v2.0.0 +）Vuex（v2.0.0 +）安装npm install --sav vuex-persistedstate坚持并重新加载页面之间的Vuex状态。 要求Vue.js（v2.0.0 +）Vuex（v...
Vue开发-基于vue+vuex+localstorage实现的本地记事本项目.zip
最新发布
05-09
Vue开发_基于vue+vuex+localstorage实现的本地记事本项目
jest-localstorage-mock：模拟Jest中的window.localStorage和window.sessionStorage的模块
02-06
将此模块与一起使用，以运行依赖于localstorage和/或sessionStorage Web测试，在localstorage测试中，您需要具有localstorage功能的有效LocalStorage API。 该模块没有运行时依赖项，因此您的项目不会使用此依赖项...
App cache与localStorage调查 作者：Steve Sounders
heaven_hao的专栏
09-27 1758
作者：SteveSounders 译者：heavenhao 原文链接：http://www.stevesouders.com/blog/2011/09/26/app-cache-localstorage-survey/   ========================
uniapp使用localStorage存储值遇到的问题
aizzl97的博客
12-26 995
llocalStorage是本地存储，是将数据存储到浏览器的方法，一般在跨页面时使用。uniapp提供数据存和取的api。
【鸿蒙 HarmonyOS】应用状态：LocalStorage/AppStorage/PersistentStorage
weixin_71403100的博客
03-04 1603
如果要实现应用级的，或者多个页面的状态数据共享，就需要用到应用级别的状态管理的概念。
OpenHarmony 应用全局的 UI 状态存储：AppStorage
OpenHarmony_dev的博客
10-18 740
AppStorage 是在应用启动的时候会被创建的单例。它的目的是为了提供应用状态数据的中心存储，这些状态数据在应用级别都是可访问的。AppStorage 将在应用运行过程保留其属性。属性通过唯一的键字符串值访问。AppStorage 可以和 UI 组件同步，且可以在应用业务逻辑中被访问。AppStorage 中的属性可以被双向同步，数据可以是存在于本地或远程设备上，并具有不同的功能，比如数据持久化（详见这些数据是通过业务逻辑中实现，与 UI 解耦，如果希望这些数据在 UI 中使用，需要用到和。
掌握HarmonyOS框架的ArkTs如何管理和共享状态数据
dsgdauigfs的博客
12-01 456
通过深入理解ARKTS中的AppStorage和LocalStorage，我们能够更好地利用这两个特性进行应用状态的管理和共享。合理使用这些工具，可以提高代码的可维护性和性能，使得开发更加高效。在实际开发中，根据具体需求和场景选择合适的状态管理方式，将有助于构建更健壮、可扩展的HarmonyOS应用。ARKTS中的AppStorage和LocalStorage为开发者提供了强大的状态管理工具，使得应用程序能够高效地共享和管理状态数据。
HarmonyOS | 状态管理(七) | AppStorage(应用级UI状态存储)
让 学习 成为一种 习惯 ( 谭祖爱 & 技术博客 )
02-28 639
1. AppStorage 是应用全局的UI状态存储。 2. @StorageProp(key) 和AppStorage中key对应的属性建立单向数据同步。 3. @StorageLink(key) 和AppStorage中key对应的属性建立双向数据同步。
harmonyos云开发基础认证 云存储 文件名 255字符
09-08
HarmonyOS云开发基础认证是一项认证考试，旨在验证参与者对于HarmonyOS云开发的基础知识和技能的掌握程度。其中一个考点是云存储，其要求是在HarmonyOS框架中使用云存储功能，并实现对文件名的限制。 云存储是一种将文件储存在云服务器上的技术。在HarmonyOS框架中，我们可以使用云存储服务来方便地读写和管理文件。而文件名限制是指在使用云存储服务时，对于文件名的长度限制为255个字符。 在使用HarmonyOS云开发进行云存储时，我们可以通过调用相关API来进行文件的上传、下载和删除等操作。在指定文件名时，我们需要确保文件名的长度不超过255个字符。如果文件名长度超过了限制，系统将会报错并拒绝操作。 在实际应用中，我们可以利用文件名限制来确保文件名的规范性和统一性。同时，合理设置文件名长度限制也有助于提高系统的安全性和稳定性。通过遵守文件名长度限制，以及合理配置云存储服务，我们可以更好地保护数据的完整性和安全性。 总之，HarmonyOS云开发基础认证中的云存储要求文件名长度限制为255个字符。遵守文件名长度限制可以提高系统的安全性和稳定性，确保数据的完整性和安全性。使用HarmonyOS云存储服务，我们可以更加方便地进行文件管理和操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值