你知道 localStorage 但你知道 IndexedDB 嗎?

2023年12月31日

💎 加入 E+ 成長計畫 與超過 250+ 位軟體工程師一起在社群中成長,並且獲得更深入、系統性軟體工程內容

現代瀏覽器中有幾個讓你可以儲存資料的地方,假如打開瀏覽器的開發者工具,可以看到 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 一樣簡單操作。

🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們