聊聊前端存储库Localforage和存储配额( 二 )

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/ target=_blank class=infotextkey>WordPress/2018/06/js-localforage-localstorage-indexdb/




推荐阅读