LocalStorage 與 JSON

LocalStorage — 瀏覽器端的儲存空間

比喻：LocalStorage 就像瀏覽器裡的小筆記本 📓

關掉瀏覽器再打開，資料還在。 但它只能存字串，要存物件需要先轉成 JSON。

基本操作

// 存入
localStorage.setItem("username", "小明");

// 讀取
let name = localStorage.getItem("username");  // ← "小明"

// 刪除
localStorage.removeItem("username");

// 清空全部
localStorage.clear();

// 檢查有幾筆
console.log(localStorage.length);

存物件（需要 JSON）

// ❌ 直接存物件會變成 "[object Object]"
localStorage.setItem("user", { name: "小明" });
localStorage.getItem("user");  // ← "[object Object]"（壞了）

// ✅ 用 JSON.stringify / JSON.parse
let user = { name: "小明", age: 20, hobbies: ["籃球"] };

// 存入：物件 → JSON 字串
localStorage.setItem("user", JSON.stringify(user));

// 讀取：JSON 字串 → 物件
let saved = JSON.parse(localStorage.getItem("user"));
console.log(saved.name);     // ← "小明"
console.log(saved.hobbies);  // ← ["籃球"]

安全讀取

// 封裝安全的讀寫函式
function saveToStorage(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
}

function loadFromStorage(key, defaultValue = null) {
    try {
        let item = localStorage.getItem(key);
        return item ? JSON.parse(item) : defaultValue;
    } catch {
        return defaultValue;     // ← JSON 解析失敗時回傳預設值
    }
}

// 使用
saveToStorage("settings", { theme: "dark", lang: "zh" });
let settings = loadFromStorage("settings", { theme: "light" });

SessionStorage

// 用法和 localStorage 完全一樣，但關掉分頁就消失
sessionStorage.setItem("token", "abc123");
sessionStorage.getItem("token");

實用範例

// 記住使用者的佈景主題
function setTheme(theme) {
    document.body.className = theme;
    saveToStorage("theme", theme);
}

// 頁面載入時套用
let savedTheme = loadFromStorage("theme", "light");
setTheme(savedTheme);

// 記住購物車
function addToCart(product) {
    let cart = loadFromStorage("cart", []);
    cart.push(product);
    saveToStorage("cart", cart);
}