前言

瀏覽器本地存儲，是每一個前端小伙伴都相當熟悉的知識點。

目前使用率最高的當之無愧為Web Storage API?，也就是localStorage和sessionStorage?，API簡單，讀取效率高。然后是indexedDB?，但大部分時間是存在于八股文和面試題中。indexedDB?的優勢為存儲空間大，且支持各種數據結構，性能也沒有問題。之所以不為重用，是因為indexedDB?的API多、長且紛雜。另外，前端使用數據庫還需要了解一些表、游標、事務等一些概念，對于不了解后端的同學來說上手成本也就高出localStorage?太多。所以，在5M內的存儲領域，indexedDB?并非首選。另外WebSQL?已被H5標準放棄，而元老級的Cookie也不再適合現代的客戶端存儲任務。

那么有沒有一個既保留indexedDB?優點，上手又簡單的方法呢，答案就是封裝js庫，localforage就是一個比較成熟的方案。

localforage

簡介

localforage是一個 JavaScript 庫，通過簡單類似 localStorage API 的異步存儲來改進你的 Web 應用程序的離線體驗。它能存儲多種類型的數據，而不僅僅是字符串。

localforage?采用優雅降級策略，若瀏覽器不支持indexedDB? 或 WebSQL?，則使用 localStorage?。所以，在優先選用indexedDB存儲的前提下，兼容性也得以保證，在所有主流瀏覽器中都可使用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。

localforage在github上擁有21.5k個star，npm下載量每周200w左右，正常使用也不會出現問題。

用法

詳細的使用方法不做過多贅述，只講一下存取示例。

• setItem

// 通過 localForage 完成存儲
localforage.setItem('key', 'value').then(doSomethingElse); 

// localForage 同樣支持回調函數 
localforage.setItem('key', 'value', doSomethingElse);

• getItem

localforage.getItem('somekey').then(function(value) { 
    // 當離線倉庫中的值被載入時，此處代碼運行 
    console.log(value); 
}).catch(function(err) { 
    // 當出錯時，此處代碼運行 
    console.log(err); 
}); 
// 回調版本： 
localforage.getItem('somekey', function(err, value) { 
    // 當離線倉庫中的值被載入時，此處代碼運行 
    console.log(value); 
});

實踐

在一次的業務需求中，基于以下兩點，果斷選擇了localforage。

1. 后期會有大量數據需要本地存儲。
2. 轉轉內部有基于localforage.js二次封裝的庫，且包含設置過期時間的方法，適用于此次需求。

上線后的一段時間，該功能平穩運行。直到sentry(錯誤日志監控系統)出現了大量關于內存溢出的報錯......

問題處理

艱難復現

起初懷疑是localforage?有兼容性問題，但是localforage?有優雅降級機制。再加上報錯內容為QuotaExceededError?，所以在閱讀大量資料后基本鎖定為在indexedDB的使用上出現了問題。另外，報錯用戶數量為個位數，說明了是用戶操作或手機存在異常導致的問題。

在確定了問題的大體方向，排查代碼沒有思路的前提下，眼前能做的就是復現這個問題。

剛才提到，QuotaExceededError為內存溢出類型報錯，直覺告訴我，需要找一個內存空間剩余最少的測試機，但當時最少的也剩余20GB，于是下載了一天大型軟件后，終于在內存剩余100MB左右時成功復現。

問題原因

不同于瀏覽器會為localStorage?預留5MB左右的儲存空間，indexedDB的配額是動態計算的，準確的說是瀏覽器的儲存配額是動態計算的，雖然瀏覽器實現各不相同，但可用存儲量通常取決于設備上可用的存儲量。

這個可用的存儲量稱為全局限制，Firefox大約為可用磁盤空間的50％，Chrome的這一數據能達到80%。如果超過此范圍，則會發起稱為源回收的過程，刪除整個源的數據，直到存儲量再次低于限制。刪除源數據沒有只刪一部分的說法——因為這樣可能會導致不一致的問題。

除全局限制外，還有另一個限制稱為組限制——為全局限制的20％。這里可以把每個二級域名看作一組，每組可以聚合使用最多20％的全局限制。

如果超出組限制，或者源回收過程無法釋放足夠空間，indexedDB? 或緩存 API就會拋出名為 QuotaExceededError? 的 DOMError。

如何查看有多少可用存儲空間？

if (navigator.storage && navigator.storage.estimate) { 
    const quota = await navigator.storage.estimate(); 
    // quota.usage -> 已使用的字節數。
    // quota.quota -> 可用最大字節數。
    const percentageUsed = (quota.usage / quota.quota) * 100; 
    console.log(`已使用${percentageUsed}%可用儲存。`); 
    const remaining = quota.quota - quota.usage; 
    console.log(`最多可再寫入${remaining}字節。`); 
}

Ps.這個方法使用了StorageManager API，使用前要先對其進行功能檢測。實測過程中，Android的webview支持此方法，ios卻不支持。

如何解決

優雅降級只是去判斷了瀏覽器是否支持某種本地存儲的方法，但無法處理硬盤不足的問題，所以如果想去避免這個問題，可以在業務代碼中使用try...catch進行異常捕獲，手動進行異常處理。

業務中常用的解決辦法是彈窗提示用戶去清理手機硬盤。實測中，華為手機硬盤小于100MB時，系統層也會彈出清理手機的彈窗提示。

try {
    localforage.setItem('key', 'value', doSomethingElse);
} catch(err) {
    if (err.name === 'QuotaExceededError') {
        //異常處理
    }
}

總結&思考

• localforage?是個優秀的前端存儲js庫，某種角度來講，indexedDB?的發展要感謝localforage。
• 不論localStorage?還是indexedDB?，存儲空間都受瀏覽器存儲配額的影響，而瀏覽器的存儲配額取決于本地磁盤剩余空間的大小。配額不足就會導致瀏覽器報QuotaExceededError。
• 開源輪子查問題沒思路時，在代碼倉庫issue中查找會是一個捷徑，作者就忽略了這點繞了彎路。

參考資料

1.https://web.dev/storage-for-the-web/

2.https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria

3.https://www.zhangxinxu.com/wordpress/2018/06/js-localforage-localstorage-indexdb/