重点专业建设验收网站制作企业网站页面html

应用状态

应用状态相关的内容需要使用模拟器或真机调试，在API 11开始也支持preview

1.LocalStorage

LocalStorage是页面级的UI状态存储，通过@Entry装饰器接收参数可以在页面内共享数据

1.1 页面内共享数据

import {MyUser} from '../model/MyUser'
//用户对象
let user:MyUser = {name:'jack',age:18}
//存储的对象
let para:Record<string,MyUser> = {'user':user}
//创建LocalStorage对象
const storage = new LocalStorage(para);
@Entry(storage)  //需要将共享的对象放入到@Entry中
@Component
struct LocalStoragePage {//获取到key是user的对象@LocalStorageProp('user') user:MyUser = {}build() {Column({space:20}){Text(this.user.name + ' ----- ' + this.user.age)Divider()ChildA()Divider()ChildB()}}
}@Component
struct ChildA {//获取到key是user的对象@LocalStorageProp('user') user:MyUser = {}build() {Column(){Text('ChildA--->' + this.user.name + ' ----- ' + this.user.age).onClick(()=>{//断言this.user.age不为undefinedthis.user.age = this.user.age as numberthis.user.age++})}}
}@Component
struct ChildB {//获取到key是user的对象@LocalStorageProp('user') user:MyUser = {}build() {Column(){Text('ChildB--->' + this.user.name + ' ----- ' + this.user.age).onClick(()=>{//断言this.user.age不为undefinedthis.user.age = this.user.age as numberthis.user.age++})}}
}

1.2 页面间共享数据

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

第一步

src/main/ets/entryability/EntryAbility.ets

export  class MyUser{name?:stringage?:number
}

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import {MyUser} from '../model/MyUser'export default class EntryAbility extends UIAbility {//用户对象user:MyUser = {name:'jack',age:18}//存储的对象para:Record<string,MyUser> = {'user':this.user}//创建LocalStorage对象storage:LocalStorage = new LocalStorage(this.para)//注意：windowStage.loadContent中要加载storagewindowStage.loadContent('pages/Index',this.storage, (err) => {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.');});}
}

Index.ets

import {MyUser} from '../model/MyUser'
//获取LocalStorage对象
const storage = LocalStorage.getShared()
@Entry(storage)
@Component
struct Index {//获取到key是user的对象@LocalStorageProp('user') user:MyUser = {}build() {Column(){Text(this.user.name + ' ----- ' + this.user.age)Text(JSON.stringify(this.user))}}
}

2.AppStorage

AppStorage是在应用启动的时候会被创建的单例。它的目的是为了提供应用状态数据的中心存储，这些状态数据在应用级别都是可访问的。AppStorage将在应用运行过程保留其属性。属性通过唯一的键字符串值访问

2.1 通过UI装饰器使用

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

• 如果初始化使用AppStorage.setOrCreate(key,value)
• 单向@StorageProp(key)，组件内的值不变的
• 双向@StorageLink(key) ,全局值均可变

import {MyUser} from '../model/MyUser'
//创建AppStorage
AppStorage.setOrCreate('user',{name:'jacklove',age:18})@Entry
@Component
struct AppStoragePage {//获取// @StorageProp('user') user:MyUser = {}@StorageLink('user') user:MyUser = {}build() {Column(){Text(`用户名：${this.user.name},年龄：${this.user.age}`).onClick(() => {this.user.age = this.user.age as number;//断言它是number类型this.user.age++});ChildC()}}
}@Component
struct ChildC {//获取// @StorageProp('user') user:MyUser = {}@StorageLink('user') user:MyUser = {}build() {Text(`ChildC ---> 用户名：${this.user.name},年龄：${this.user.age}`).onClick(() => {this.user.age = this.user.age as number;//断言它是number类型this.user.age++})}
}

2.2 通过逻辑使用

• AppStorage.Get(key) 获取数据
• AppStorage.Set(key,value) 覆盖数据
• const user:SubscribedAbstractProperty = AppStorage.link(‘user’) 根据属性获取属性的值
• link.set(value) 修改值
• link.get() 获取值

import {MyUser} from '../model/MyUser'
import promptAction from '@ohos.promptAction'AppStorage.setOrCreate<MyUser>('user',{name:'rose',age:20})@Entry
@Component
struct AppStroage2Page {@StorageLink('user') user:MyUser = {}build() {Column({space:30}){Text('Get').onClick(()=>{//只做数据的获取const user = AppStorage.get<MyUser>('user');promptAction.showToast({message:JSON.stringify(user)})console.log('hsy',JSON.stringify(user))})Text('Set').onClick(() => {//只做数据的设置AppStorage.set<MyUser>('user',{name:'jack爱',age:30})})Text('Link').onClick(() => {//取出对象中的属性值,取出了userconst user:SubscribedAbstractProperty<MyUser> = AppStorage.link('user')user.set({name:'蔡徐坤',age:26})})}}
}