你知道 localStorage 但你知道 IndexedDB 嗎？

現代瀏覽器中有幾個讓你可以儲存資料的地方，假如打開瀏覽器的開發者工具，可以看到 LocalStorage、SessionStorage、CacheStorage、IndexedDB、Cookies 等。多數前端開發者平常可能比較常用 localStorage，但其實 IndexedDB 也很好用，在這篇文章讓我們來聊聊 IndexedDB。

其實在全端雙週報 #7 我們就提過 IndexedDB，在那期我們談到專案管理軟體 Linear 透過 IndexedDB 把資料快取在客戶端，當使用者有重新整理頁面時，先查看客戶端快取的資料是否是最新的，如果是的話就不跟伺服器端拿資料，這大幅降低伺服器端的負擔。

你可能會問，localStorage 也可以存東西、當作快取來用，那為何還需要 IndexedDB? 兩者差別在哪? 首先，localStorage 是鍵值對 (key-value pair) 的儲存形式，能夠存的格式只有字串 (string)，所以在存的時候，多半會搭配 JSON.stringify 來用。

而 IndexedDB 則是交易式資料庫 (transactional database)，並透索引 (index) 作為鍵來存取資料，而存的資料格式也不限於字串，基本上 JavaScript 的結構化克隆演算法能處理的物件，都能存在 IndexedDB。此外，IndexedDB 通常會用來處理比較大量的資料。

跟 localStorage 的另一個差別是，IndexedDB 目前在執行面都是非同步 (asynchronous)，換句話說在存取資料時，不會阻塞應用程式的運作。而因為是交易式資料庫，即使是非同步，IndexedDB 也能確保資料的完整性，在寫入資料要不就全部成功，要不就整個全部失敗，不會有部分存成功、部分失敗的狀況。

看完上面的比較，大概可以歸結出，IndexedDB 是個非同步、可以拿來存比較大量資料的瀏覽器儲存空間。那具體他可以拿來做什麼呢? 如先前提到 Linear 用 IndexedDB 做快取，用 IndexedDB 的一個好處是，在離線的時候 (或是使用者的網路斷掉)，仍可以從 IndexedDB 拿資料，在技術上，我們會稱這個為 persistent storing，舉例來說，TanStack Query 有提供 persistQueryClient 可以搭配瀏覽器的儲存機制，來做離線時的快取，提供更好的離線使用體驗。

如果大家想試試看 IndexedDB，可以參考 Google web.dev 的這一篇使用說明 連結。不過實務上使用起來還是比較麻煩一點，因此更推薦直接用開源專案 localForage 連結，這個開源專案額外做一層封裝，把原本比較麻煩使用的 IndexedDB 或 WebSQL，變得可以像 localStorage 一樣簡單操作。