本地資料庫（Local Database）研究
隨著網頁應用日益複雜，前端需要處理的資料量也大幅增加。為了提升用戶體驗、支援離線功能與減少伺服器壓力，現代瀏覽器內建了多種本地資料儲存技術。本文將聚焦於本地資料庫的核心技術——IndexedDB，並與 localStorage 進行比較，探討其特性、應用場景與安全性設計。
本地資料庫的主要類型
localStorage
- 用途：儲存少量、簡單的 key-value 資料。
- 容量限制：約 5~10 MB。
- 資料型態：僅支援字串。
- 操作方式：同步 API，操作簡單但會阻塞主執行緒。
- 查詢方式：只能以 key 查詢，無法進行複雜查詢。
IndexedDB
- 用途：儲存大量、結構化或複雜資料，支援離線快取與進階應用。
- 容量限制：數百 MB 以上，實際上沒有明確上限。
- 資料型態：可儲存任意 JavaScript 物件、ArrayBuffer、Blob 等。
- 操作方式：非同步 API，不會阻塞主執行緒。
- 查詢方式：支援索引與複雜查詢。
- 交易機制：支援交易，確保資料一致性與完整性。
IndexedDB 的核心特性
- 高容量儲存：可存放大量資料，適合圖片、影音、離線快取等需求。
- 非同步操作：確保資料存取不影響網頁流暢度。
- 支援交易（Transaction）：所有操作皆在交易中進行，確保資料一致性，失敗時自動回滾。
- 索引功能：可針對資料屬性建立索引，加速查詢。
- 多種資料型態：不僅限於字串，能直接儲存物件與二進位資料。
- 同源政策：每個網域僅能存取自己建立的資料庫，防止跨站存取。
- 資料持久化：即使關閉瀏覽器，資料仍會保留。
IndexedDB 與 localStorage 比較
| 特性 | IndexedDB | localStorage |
|---|---|---|
| 儲存容量 | 數百 MB 以上 | 約 5~10 MB |
| 資料型態 | 任意型態 | 只能字串 |
| 查詢效率 | 支援索引，查詢快 | 只能 key 查詢 |
| 操作方式 | 非同步 | 同步 |
| 支援交易 | 有 | 無 |
資料安全性設計
- 同源政策：嚴格限制資料僅能由同一網域存取，防止跨站資料洩漏。
- 交易機制：所有操作必須在交易中進行，確保資料一致性與完整性。
- 用戶授權與瀏覽器限制：首次開啟 IndexedDB 可能需用戶授權，無痕/私密模式下通常無法使用或不會保留資料。
- 錯誤處理機制：可針對不同層級設置錯誤監聽，及時捕捉異常，避免資料損壞。
- 資料本地化：所有資料僅存於用戶裝置，不會自動傳送至伺服器，降低遠端洩漏風險。
- 資料加密（需自行實作）：若需更高安全性，建議開發者自行加密資料後再儲存。
適用場景
- 離線網頁應用（PWA）：如電子郵件、書籤、待辦清單等，需大量資料本地快取。
- 大型資料快取：如表格、圖片、影音等需高容量儲存。
- 複雜查詢需求：如需針對資料屬性搜尋或排序。
- 提升效能：減少伺服器請求，提升前端回應速度。
結論
本地資料庫技術是現代前端開發不可或缺的一環。IndexedDB 以其高容量、彈性資料型態、非同步操作、交易機制與安全設計，成為儲存大量或複雜資料的首選。相較之下，localStorage 僅適合簡單、少量資料的儲存。開發者應根據應用需求選擇合適的本地資料庫技術，並搭配適當的安全措施，確保資料完整與用戶隱私。