---
tags: 套件與知識
---
# LocalStorage 網頁本機儲存空間

localStorage（本地儲存）是 Web 瀏覽器提供的一種用於在瀏覽器端存儲數據的 API。它允許開發人員將鍵值對數據永久地存儲在用戶的瀏覽器中，以供後續訪問和使用。

### 查看位置
瀏覽器 F12 > 應用程式 (Application) >儲存空間 > 本機儲存空間 ( localStorage)
數據是存放在**網頁網址**中的，且是個別並存的，因此點選該網頁後的資料格式，呈現如下所示:

| key | vaule |
| -------- | -------- |
| 名字 | 字串(String) |

## 使用方法

### LocalStorage 方法
localStorage+方法
* setItem('Key名稱', 'Vaule數值')
存放數據
* getItem('Key名稱')
取得特定數據
* removeItem('Key名稱')
清空特定數據
* .clear()
移除全部數據

// 設置 localStorage 數據
localStorage.setItem('username', 'John');

// 取得 localStorage 數據
const username = localStorage.getItem('username');
console.log(username); // 输出：John

// 移除 localStorage 數據
localStorage.removeItem('username');

// 清空所有 localStorage 數據
localStorage.clear();

### Array陣列物件 存放方法
localStorage，存放的vaule值只能是字串(String)，因此如果要放陣列物件，需搭配以下兩種方法:
* JSON.stringify() 轉型成字串(String)
* JSON.parse() 解析成陣列物件(Object)

// 示範程式碼
const user = {
  name: 'John',
  age: 30,
  email: '[e-mail]'
};

// 陣列轉型成字串
let userString = JSON.stringify(user)
// 將數據存储在 localStorage 中
localStorage.setItem('user', userString);

// 從 localStorage 中檢視數據並取得，然後解析成陣列物件
let userGetItem = localStorage.getItem('user');
const userArray = JSON.parse(userGetItem);

// 输出存储后的數據
console.log(userArray); // { name: 'John', age: 30, email: '[e-mail]' }
console.log(userArray.name); // John
console.log(userArray.age); // 30
console.log(userArray.email); // [e-mail]