localStorage 是瀏覽器提供的一個 本地存儲 API，可以在用戶的瀏覽器中存儲數據，數據不會隨頁面刷新而丟失。

1. 基本用法

(1) 存儲數據（setItem）

localStorage.setItem("username", "zhangsan");

存儲 “username”: “zhangsan” 到本地。

(2) 讀取數據（getItem）

let user = localStorage.getItem("username");
console.log(user); // "zhangsan"

獲取 localStorage 里 “username” 的值。

(3) 刪除數據
刪除單個數據（removeItem）

localStorage.removeItem("username");

清空所有數據（clear）

localStorage.clear();

2. 存儲對象
   localStorage 只能存字符串，要存對象的話，需要用 JSON.stringify() 轉換：

<!-- 存儲對象可以實現多條數據  --><script>const obj={name:'張三', age:18, gender:'男'}localStorage.setItem('obj', obj)//前面的obj是鍵, 后面是值 不一樣 console.log(localStorage.getItem('obj'));// 因為只能存字符串 所以結果是[object Object]// 解決:需要將復雜數據類型轉換成ISON字符串,在存儲到本地語法:JSON.stringify(復雜數據類型)localStorage.setItem('obj', JSON.stringify(obj))console.log(localStorage.getItem('obj'));//但是這是字符串形式

讀取時需要 JSON.parse() 解析回來：

console.log(JSON.parse(localStorage.getItem('obj') ));

3. 實際案例：存儲商品數據

let products = [{ id: 1, title: "商品1", price: 100 },{ id: 2, title: "商品2", price: 200 },
];// 存儲商品列表
localStorage.setItem("products", JSON.stringify(products));// 讀取商品列表
let savedProducts = JSON.parse(localStorage.getItem("products"));
console.log(savedProducts);

4. sessionStorage vs localStorage

特性	localStorage	sessionStorage
存儲時間	永久存儲，頁面關閉后仍然存在	僅在 當前標簽頁 有效，關閉標簽頁數據就沒了
存儲大小	約 5MB	約 5MB
作用域	同源的所有頁面都能訪問	只在當前頁面的 標簽頁 內有效

簡單來說：

localStorage 用于長期存儲數據，例如用戶設置、購物車數據等。

sessionStorage 用于短期存儲，例如表單數據、臨時會話信息等。

5. localStorage 監聽（storage 事件）

當 同一瀏覽器的不同頁面 修改 localStorage 時，其他頁面可以監聽變化：

window.addEventListener("storage", (event) => {console.log("localStorage 變化：", event);
});

? 同一頁面不會觸發 storage 事件，只有其他頁面修改 localStorage 才會觸發。

6. 適用場景

記住用戶設置（如夜間模式）

存儲用戶的購物車數據

本地緩存 API 請求結果

跨頁面共享數據