LocalStorage vs. IndexedDB vs. Cookies vs. OPFS vs. WASM-SQLite
現代瀏覽器可用的 Storage API
Cookies
Cookies 會儲存小型的鍵值資料,主要用於工作階段管理、個人化與追蹤。Cookies 可以設定多種安全選項,例如存活時間或網域屬性,以便在多個子網域之間共用。
LocalStorage
LocalStorage 只適合儲存少量且需要跨 session 保存的資料,並且受限於 5MB 的容量上限。要儲存複雜資料,通常需要轉成字串,例如使用 JSON.stringify()。這個 API 不是非同步的,代表在操作時會阻塞你的 JavaScript 程序,因此執行重型操作可能會讓 UI 無法渲染。
IndexedDB
IndexedDB 是一個用於儲存大量結構化 JSON 資料的低階 API。雖然使用起來有些困難,但 IndexedDB 可以利用索引並支援非同步操作。它缺乏複雜查詢能力,只能迭代索引,更像是其他函式庫的底層基礎,而非完整的資料庫。
儲存容量限制
| 技術 | 上限 |
|---|---|
| Cookie | 4 KB |
| LocalStorage | 每個來源 4 MB 到 10 MB |
| IndexedDB | 取決於瀏覽器實作 |
| OPFS | 取決於可用的磁碟空間 |
效能比較
初始化時間
| 技術 | 時間(毫秒) |
|---|---|
| IndexedDB | 46 |
| OPFS 主執行緒 | 23 |
| OPFS WebWorker | 26.8 |
| WASM SQLite(記憶體) | 504 |
| WASM SQLite(IndexedDB) | 535 |
小型寫入延遲
| 技術 | 時間(毫秒) |
|---|---|
| Cookies | 0.058 |
| LocalStorage | 0.017 |
| IndexedDB | 0.17 |
| OPFS 主執行緒 | 1.46 |
| OPFS WebWorker | 1.54 |
| WASM SQLite(記憶體) | 0.17 |
| WASM SQLite(IndexedDB) | 3.17 |
小型讀取延遲
| 技術 | 時間(毫秒) |
|---|---|
| Cookies | 0.132 |
| LocalStorage | 0.0052 |
| IndexedDB | 0.1 |
| OPFS 主執行緒 | 1.28 |
| OPFS WebWorker | 1.41 |
| WASM SQLite(記憶體) | 0.45 |
| WASM SQLite(IndexedDB) | 2.93 |
