# 鴻蒙Harmony-UIAbility內(nèi)狀態(tài)-LocalStorage詳細(xì)介紹

## 1.1 Localstorage的概念

> LocalStorage是頁面級的UI狀態(tài)存儲(chǔ)，通過@Entry裝飾器接收的參數(shù)可以在頁面內(nèi)共享同一個(gè)LocalStorage實(shí)例，LocalStorage也可以在UIAbility內(nèi)，頁面間共享狀態(tài)

## 1.2 LocalStorage單個(gè)頁面的使用方法

### 1.2.1 單個(gè)頁面的數(shù)據(jù)狀態(tài)存儲(chǔ)方法

1. 準(zhǔn)備一個(gè)共享數(shù)據(jù)，鍵值對的方式存儲(chǔ)

2. 創(chuàng)建LocalStorage實(shí)例：const storage = new LocalStorage({key:value})
3. 單向 @LocalStorageProp(‘user’)組件內(nèi)可變
4. 雙向 #LocalStorageLink(‘user’)全局均可變

### 1.2.2 案例演示

1. 準(zhǔn)備共享數(shù)據(jù)

```ts
const data:Record = {
'uname':'公孫離',
'age':'18'
}

```

2. 創(chuàng)建一個(gè)storage實(shí)例

```ts
const storage = new LocalStorage(data)
```

3. 使用共享數(shù)據(jù)庫

```ts
1.@Entry(storage)
//表示我要從共享數(shù)據(jù)庫中取出uname字段 具體需要取出什么字段根據(jù)自己需求即可
@LocalStorageLink('uname')
//給取出的字段取一個(gè)別名，需要賦初始值。因?yàn)榭赡苣貌坏?br /> message: string = ''
```

4. 具體代碼實(shí)現(xiàn)

```ts
const data:Record = {
'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('改變子組件的狀態(tài)')
.onClick(()=>{
this.message = '西施'
})
}
}
}
```

### 1.2.3 效果展示


##

## 1.3 LocalStorage多個(gè)頁面共享UIAbility的使用方法

### 1.3.1 多個(gè)頁面的使用方法

1. 依舊是準(zhǔn)備共享數(shù)據(jù)，放置在設(shè)置當(dāng)前應(yīng)用的加載頁面（UIAbility共享），只要是當(dāng)前windowstage內(nèi)的界面，都可以共享這份數(shù)據(jù)
2. 在設(shè)置應(yīng)用的加載頁面創(chuàng)建storage實(shí)例
3. 通過LocalStorage里面的方法getShared獲取數(shù)據(jù)

### 1.3.2 案例演示

1. 準(zhǔn)備數(shù)據(jù)

```ts
const data:Record = {
'uname':'公孫離',
'age':'18',
}
const storage = new LocalStorage(data)
```

2. 創(chuàng)建storage實(shí)例，將storage傳遞給頁面

```ts
1.const storage = new LocalStorage(data)
2. windowStage.loadContent('pages/10/TestLocalStorage03',storage);
```

3. 接收數(shù)據(jù)

```ts
const storage = LocalStorage.getShared()
//其他步驟同單個(gè)頁面?zhèn)鬏攩?，這里就不再敘述
```

4. 完整代碼展示

* UIAbility內(nèi)代碼

```ts
onWindowStageCreate(windowStage: window.WindowStage): void {
const data:Record = {
'uname':'公孫離',
'age':'18',
}
const storage = new LocalStorage(data)
// //只要是當(dāng)前windowStage內(nèi)的界面，都可以共享這份數(shù)據(jù)
windowStage.loadContent('pages/10/TestLocalStorage03',storage);
}
```

* 頁面1

```ts
// const data:Record = {
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('改變子組件的狀態(tài)')
.onClick(() => {
this.message = '西施'
})
Button('切換頁面')
.onClick(() => {
router.pushUrl({
url: 'pages/10/TextLocalStorage2'
})
})
}
}
}
```

* 頁面2

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

審核編輯 黃宇