ArtTS提供了好几种状态用来帮助我们管理我们的全局数据

• State组件内状态
• LocalStorage-UIAbility状态（内存- 注意：和前端的区分开，它非持久化，非全应用）
• AppStorage- 应用内状态-多UIAbility共享-（内存-非持久化-退出应用同样消失）
• PersistenStroage-全局持久化状态（写入磁盘-持久化状态-退出应用 数据同样存在）

1.1、UIAbility内状态-LocalStorage

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

• 创建 LocalStorage 实例：const storage = new LocalStorage({ key: value })
• 单向 @LocalStorageProp('user') 组件内可变
• 双向 @LocalStorageLink('user') 全局均可变

1.1.1、页面内

1）一个页面内

// Record 为字典，map结构
let user:Record<string, UserInfoClass> = {
  "user": {
    username: '哈哈',
    age: 28
  }
}
const local =new LocalStorage(user) // 得到LocalStorage的对象

@Entry(local) // 使用entry包括，表示可以被当前页面LocalStorageCase所使用
@Component
struct LocalStorageCase {
  @LocalStorageProp("user") // 去除user数据给到myUser对象
  myUser:Partial<UserInfoClass> = {} // Partial是个泛型工具，把类型中的所有属性都变成可选；
  // myUser:UserInfoClass = {} as UserInfoClass
  @LocalStorageLink("user") // 双向，可更改数据
  myUser2:Partial<UserInfoClass> = {}
  build() {
    Row() {
      Column() {
        Row() {
          Text(this.myUser.username)
          Text(this.myUser.age.toString())
        }
        Button('更改数据')
          .onClick(() => {
            this.myUser2.username = 'haha'
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

export class UserInfoClass {
  username:string = ''
  age:number = 0
}

2）两个页面内

• 页面1

// Record 为字典，map结构
import router from '@ohos.router'
let user:Record<string, UserInfoClass> = {
  "user": {
    username: '哈哈',
    age: 28
  }
}
const local =new LocalStorage(user) // 得到LocalStorage的对象
export {local} // 导出LocalStorage对象
@Entry(local)
@Component
struct LocalStorageCase {
  @LocalStorageProp("user") // 取出user数据给到myUser对象
  myUser:Partial<UserInfoClass> = {}
  @LocalStorageLink("user") // 双向，可更改数据
  myUser2:Partial<UserInfoClass> = {}
  build() {
    Row() {
      Column() {
        Row() {
          Text(this.myUser.username)
          Text(this.myUser.age.toString())
        }
        Button('更改数据')
          .onClick(() => {
            this.myUser2.username = 'haha'
          })
        Button('跳转')
          .onClick(() => {
            router.pushUrl({
              url:'pages/04/LocalStorageCase3'
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

export class UserInfoClass {
  username:string = ''
  age:number = 0
}

• 页面2

import {local, UserInfoClass} from './LocalStorageCase2' // 导入LocalStorage对象，UserInfoClass类
@Entry(local) // 使用entry包括，表示可以当前页面可以使用local对象
@Component
struct LocalStorageCase3 {
  @LocalStorageProp("user") // 取出user数据给到myUser对象
  myUser:Partial<UserInfoClass> = {} // Partial是个泛型工具，把类型中的所有属性都变成可选；
  @LocalStorageLink("user") // 双向，可更改数据
  myUser2:Partial<UserInfoClass> = {}
  build() {
    Row() {
      Column() {
        Row() {
          Text(this.myUser.username)
          Text(this.myUser.age.toString())
        }
      }
      .width('100%')
    }
    .backgroundColor(Color.Pink)
    .height('100%')
  }
}

• 使用LocalStorageLink实现双向绑定

@LocalStorageLink("user") // 双向，可更改数据
myUser2:Partial<UserInfoClass> = {}
Button('更改数据')
          .onClick(() => {
            this.myUser2.username = 'haha'
          })