15-1 資料的記憶：LocalStorage 與 Cookies

1. LocalStorage：超長記憶

資料會一直留著，直到你手動刪除。

// 存入
localStorage.setItem("theme", "dark");

// 讀取
const theme = localStorage.getItem("theme");

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

// ⚠️ 注意：只能存字串。存物件要先 JSON.stringify()
const userObj = { name: "Andy" };
localStorage.setItem("user", JSON.stringify(userObj));

2. SessionStorage：短暫記憶

關閉分頁或視窗後，資料就會消失。語法跟 LocalStorage 一模一樣。

3. Cookies：網路的門票

雖然也能存資料，但 Cookies 主要是用來跟伺服器溝通（身分驗證）。

• HttpOnly: 讓 JS 讀不到 Cookie (防止 XSS)。
• SameSite: 防止 CSRF 攻擊。

// 在 JS 中讀寫 (如果沒設 HttpOnly)
document.cookie = "username=Andy; max-age=3600; path=/";

4. 儲存空間大對決