# 鴻蒙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. 準備共享數據

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

```

2. 創建一個storage實例

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

3. 使用共享數據庫

```ts
1.@Entry(storage)
//表示我要從共享數據庫中取出uname字段 具體需要取出什么字段根據自己需求即可
@LocalStorageLink('uname')
//給取出的字段取一個別名，需要賦初始值。因為可能拿不到
message: string = ''
```

4. 具體代碼實現

```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('改變子組件的狀態')
.onClick(()=>{
this.message = '西施'
})
}
}
}
```

### 1.2.3 效果展示


##

## 1.3 LocalStorage多個頁面共享UIAbility的使用方法

### 1.3.1 多個頁面的使用方法

1. 依舊是準備共享數據，放置在設置當前應用的加載頁面（UIAbility共享），只要是當前windowstage內的界面，都可以共享這份數據
2. 在設置應用的加載頁面創建storage實例
3. 通過LocalStorage里面的方法getShared獲取數據

### 1.3.2 案例演示

1. 準備數據

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

2. 創建storage實例，將storage傳遞給頁面

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

3. 接收數據

```ts
const storage = LocalStorage.getShared()
//其他步驟同單個頁面傳輸嗎，這里就不再敘述
```

4. 完整代碼展示

* UIAbility內代碼

```ts
onWindowStageCreate(windowStage: window.WindowStage): void {
const data:Record = {
'uname':'公孫離',
'age':'18',
}
const storage = new LocalStorage(data)
// //只要是當前windowStage內的界面，都可以共享這份數據
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('改變子組件的狀態')
.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%')
}
}
```

審核編輯 黃宇