HTML5 提供了以下幾種客戶端儲存型別：
-
localStorage: 用於持久化儲存資料，即使關閉瀏覽器或重啟電腦，資料仍然存在。除非手動清除或透過 JavaScript 程式碼刪除，否則資料將一直保留。
-
sessionStorage: 用於臨時儲存資料，僅在當前瀏覽器會話期間有效。關閉瀏覽器視窗或標籤頁後，資料將被清除。
-
Cookies: 最初用於在客戶端儲存少量資料，主要用於跟蹤使用者會話或儲存使用者偏好。Cookie 可以設定過期時間，使其在特定時間後失效。Cookie 會隨每個 HTTP 請求一起傳送到伺服器，因此不適合儲存大量資料。
-
IndexedDB: 用於儲存大量的結構化資料，類似於客戶端的資料庫。它支援事務、索引和查詢，適用於需要高效能和複雜資料管理的 Web 應用程式。
-
Web SQL Database: 這是一個已棄用的 API，用於在客戶端儲存關係型資料。它基於 SQL，但由於標準化方面的問題，不再推薦使用，並逐漸被 IndexedDB 取代。
下表總結了這些儲存型別的區別：
| 特性 | localStorage | sessionStorage | Cookies | IndexedDB | Web SQL Database (已棄用) |
|---|---|---|---|---|---|
| 儲存期限 | 持久化 | 會話 | 可設定過期時間，預設為會話 | 持久化 | 持久化 |
| 資料大小 | ~5MB | ~5MB | ~4KB | 通常較大，取決於瀏覽器實現 | 通常較大，取決於瀏覽器實現 |
| 資料型別 | 字串 | 字串 | 字串 | JavaScript 物件，支援二進位制資料 | 關係型資料 |
| 資料訪問 | 同源 | 同源 | 可設定訪問許可權，例如跨域訪問 | 同源 | 同源 |
| API 複雜度 | 簡單 | 簡單 | 相對簡單 | 較複雜 | 較複雜 |
| 用途 | 長期儲存 | 臨時儲存 | 使用者認證、跟蹤使用者行為、儲存少量使用者偏好 | 儲存大量結構化資料，例如離線應用 | 儲存關係型資料 |
| 傳送到伺服器 | 否 | 否 | 是 | 否 | 否 |
選擇合適的儲存型別:
- 對於需要長期儲存的資料，例如使用者設定或應用程式狀態，使用
localStorage。 - 對於臨時資料，例如當前表單資料或購物車的臨時內容，使用
sessionStorage。 - 對於需要在客戶端和伺服器之間共享的小量資料，例如使用者認證資訊，使用
Cookies。 - 對於需要儲存大量結構化資料或構建離線 Web 應用程式，使用
IndexedDB。 - 避免使用
Web SQL Database，因為它已被棄用。
希望這個解釋能夠幫助你理解 HTML5 的不同儲存型別。