Storage

Cookie

• 用途：存放需要在伺服器和客戶端間傳遞的小型資料（如用戶認證資訊）。

• 大小限制：單個 cookie 約 4KB。

• 存取範圍：

  • 同一個域名下的所有頁面可以存取。

  • 每次 HTTP 請求時瀏覽器會自動附帶 cookie。

• 有效期：

  • 可手動設置有效期（Expires/Max-Age）。

  • 若未設置，會在瀏覽器關閉時刪除（Session Cookie）。

• 安全性：

  • HttpOnly：禁止 JavaScript 存取，防止 XSS 攻擊。

  • Secure：僅在 HTTPS 連線下傳送。

---

Local Storage

• 用途：長期儲存客戶端資料，如應用設定、使用者偏好等。

• 大小限制：約 5MB（視瀏覽器而定）。

• 存取範圍：同一個域名下的所有頁面都可以存取。

• 有效期：資料永久保存，除非手動清除或透過程式移除。

• 安全性：

  • 儲存於本地，不會自動傳送到伺服器。

  • 無法設置 HttpOnly，因此易受 XSS 影響。

---

Session Storage

• 用途：在單一「會話期間」儲存臨時資料（如表單暫存資料）。

• 大小限制：約 5MB。

• 存取範圍：

  • 僅限同一個瀏覽器「窗口/標籤頁」。

  • 不同標籤頁間無法共享。

• 有效期：隨會話結束（關閉標籤頁或瀏覽器）自動清除。

• 安全性：

  • 類似 localStorage。

  • 無 HttpOnly 屬性，需防範 XSS。

---

IndexedDB

---

IndexedDB 是什麼？

IndexedDB 是一種瀏覽器內建的 NoSQL 資料庫，適合儲存大量結構化資料，支援離線使用，功能比 localStorage/sessionStorage 強大許多。

---

IndexedDB 的特點

• 儲存大量資料：

  • 儲存容量遠超 localStorage（數百 MB～數 GB）。

  • 空間使用過多時瀏覽器可能會要求使用者授權。

• 支援結構化資料：

  • 可直接儲存物件、陣列、Blob、File 等複雜資料型別。

• 離線存取：

  • 支援離線應用，網路恢復後可再同步資料。

• 非同步 API：

  • 操作皆為非同步，不會阻塞 UI 執行緒。

• 事務支援（ACID）：

  • 確保資料的原子性、一致性、隔離性、持久性。

  • 所有讀寫必須在事務中進行。

• 索引支援：

  • 可以為資料欄位建立索引，提高搜尋效率。

---

IndexedDB 的基本結構

• Database（資料庫）：

  • IndexedDB 中可以有多個獨立的資料庫。

• Object Store（物件存儲）：

  • 類似 SQL 的資料表，用來儲存資料物件。

  • 每筆資料都有一個唯一的 key。

• Index（索引）：

  • 對特定欄位建立索引，加速查詢速度。

• Transaction（事務）：

  • 所有操作必須在事務中進行，確保資料完整性。

---

IndexedDB 的應用場景

• 離線網頁應用（PWA）：

  • 如地圖、筆記、待辦清單等即使離線也能操作。

• 大量資料儲存：

  • 儲存使用者設定檔、內容管理系統（CMS）資料、緩存 API 回應等。

• 多媒體內容管理：

  • 儲存圖片、影片、檔案等大型二進制資料（Blob/File）。

---

小結

• 如果是小型資料傳輸（認證資訊） ➔ 使用 Cookie。

• 如果是長期存在的資料（設定、喜好） ➔ 使用 Local Storage。

• 如果是短期暫存（會話期間使用） ➔ 使用 Session Storage。

• 如果是大量/複雜資料（離線、大容量儲存） ➔ 使用 IndexedDB。