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。
Last updated