昨天談完Cookie 🍪 ，今天我們把剩下的儲存機制說完（LocalStorage、SessionStorage、IndexedDB）

LocalStorage

用來存放大量、不會過期的資料

• 容量：5MB 左右
• 生命週期：除非手動刪除，否則永遠存在
• 應用場景：
  • 儲存使用者偏好設定
  • 暫存網站資料（例如購物車）

如何設定LocalStorage？

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

// 讀取
console.log(localStorage.getItem("theme")); // "dark"

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

LocalStorage裡面有什麼？

你可以在開發者工具 → 應用程式 → 本機儲存空間裡看到，每一筆資料是以Key-Value形式儲存

LocalStorage安全嗎？

• 儲存在使用者端，任何人用開發者工具都能看到
• 不會自動加密，敏感資訊（密碼、Token）絕對不要存
• 可能被 XSS 攻擊讀取，所以重要資料要放在伺服器端

SessionStorage

用來儲存只在瀏覽器分頁存活的資料

• 容量：5MB 左右
• 生命週期：關閉分頁就刪除
• 應用場景：
  • 儲存單次瀏覽的暫時資料（表單暫存、單次操作記錄）

如何設定SessionStorage？

// 儲存
sessionStorage.setItem("step", "2");

// 讀取
console.log(sessionStorage.getItem("step")); // "2"

// 刪除
sessionStorage.clear();

SessionStorage裡面有什麼？

可以在開發者工具 → 應用程式 → 工作階段儲存空間看到，也是以 Key-Value 形式儲存：

IsThisFirstTime_Log_From_LiveServer是因為我用VS Code的Live Server開啟的

SessionStorage安全嗎？

• 和 LocalStorage 一樣，完全儲存在用戶端
• 生命週期短，比較適合非敏感的暫存資料
• 同樣要避免 XSS 攻擊暴露資料

Note：

LocalStorage 和 SessionStorage很像，他們不一樣的地方在於：

• LocalStorage會永遠存在，除非手動刪除
• SessionStorage只會存在目前的頁面，如果關掉頁面或重整，資料就會被刪除

IndexedDB

瀏覽器內建的 NoSQL 資料庫，可以存放結構化資料

• 容量：可達數百 MB，甚至更大（依瀏覽器限制）
• 生命週期：除非手動刪除，否則永遠存在
• 應用場景：
  • 儲存大量離線資料（如離線應用、PWA）
  • 儲存圖片、影片、JSON 物件
  • 適合需要查詢、索引的情境

如何設定IndexedDB？

let request = indexedDB.open("MyDB", 1);

request.onsuccess = function(event) {
  console.log("Database Opened !");
};

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  db.createObjectStore("users", { keyPath: "id" });
};

IndexedDB裡面有什麼？

• 非同步儲存
• 離線仍然可以使用
• 資料以資料庫（Database）→ 物件倉儲（Object Store） → 紀錄（Record） 的層級結構儲存
• 可以在開發者工具 → 應用程式 → IndexedDB 看到，裡面就會有我剛剛建的 MyDB database 和 users table

IndexedDB安全嗎？

• 儲存在用戶端，但資料量龐大時建議加密
• 較不容易被誤用或直接讀取（不像 LocalStorage 那麼直觀）
• 同樣需要防範 XSS 攻擊

整理比較

⚠️ 注意：重要資料不要存在用戶端，尤其不要明碼儲存敏感資訊

不論哪一種儲存方式，都要搭配伺服器驗證與安全策略，避免被竊取

參考資料

https://miahsuwork.medium.com/第八週-網頁資料儲存-cookie-local-storage-session-storage-a3f40013da37

https://ithelp.ithome.com.tw/articles/10268532

https://vocus.cc/article/6583dcbbfd89780001edd0ab

https://web.dev/articles/indexeddb?hl=zh-tw

https://www.explainthis.io/zh-hant/swe/what-is-indexeddb