大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 localForage

Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.

localForage 是一个快速且简单的 JavaScript 存储库，其通过使用异步存储对例如：IndexedDB 、 WebSQL、localStorage 等进行简单的、强大的 API 包装来改善 Web 应用程序的离线体验。localForage 在不支持 IndexedDB 或 WebSQL 的浏览器中使用 localStorage。

从 localForage v1.7.3 开始，localForage 添加到应用程序中的有效代码体积相当小，其使用 gzip 压缩提供服务，localForage 将为 Bundle 总大小增加不到 10k，如果使用 brotli'd 压缩算法后体积更加小，只有 7.8k。

同时，对于特定前端框架，localForage 还提供了存储驱动程序，开发者可以直接使用，比如：AngularJS、Angular 4、Backbone、Ember、Vue、NuxtJS 等等

目前 localForage 在 Github 通过 MIT 协议开源，有超过 24.1k 的 star、2k 的 fork、392k 的项目依赖量、代码贡献者 100+、妥妥的前端优质项目。

如何使用 localForage

要使用 localForage，只需将下面的 JavaScript 文件添加到页面中即可：

<script src="localforage/dist/localforage.js"></script>
<script>localforage.getItem('something', myCallback);</script>

当然，也非常推荐开发者使用 async/await 的模式使用 localForage：

try {
    const value = await localforage.getItem('somekey');
    // 当从离线数据 store 获取到数据后调用
    console.log(value);
} catch (err) {
    // 抛出错误调用
    console.log(err);
}

如果使用 Promise 的方法也非常简单:

localforage.setItem('key', 'value').then(function () {
  return localforage.getItem('key');
}).then(function (value) {
  // 获取到值
}).catch(function (err) {
  // we got an error
});

同时，localForage 还提供了众多方法来对存储本身进行操作，比如：localforage.clear() 将删除离线 store 中的所有数据：

localforage.clear().then(function() {
    // 数据删除后执行该方法
    console.log('Database is now empty.');
}).catch(function(err) {
    // 错误处理方法
    console.log(err);
});

同时，还提供了 iterate 方法对离线存储 store 的数据进行迭代：

localforage.iterate(function(value, key, iterationNumber) {
    // 迭代键值对，每个元素都会调用一次
    console.log([key, value]);
}).then(function() {
    console.log('Iteration has completed');
}).catch(function(err) {
    // 错误处理方法
    console.log(err);
});

localForage 还允许开发者调用 setDriver 选择特定的驱动，默认情况下按照 IndexedDB>WebSQL>localStorage 的优先级。比如下面的示例：

localforage.setDriver(localforage.LOCALSTORAGE);
// 强制使用 localStorage
localforage.setDriver([localforage.WEBSQL, localforage.INDEXEDDB]);
// 指定多个驱动

更多关于 localForage 的用法可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/localForage/localForage

https://localforage.github.io/localForage/

https://byte-explorer.medium.com/localforage-a-lightweight-cross-browser-offline-storage-library-ae29e1960348

https://dev.to/cooldashing24/save-data-to-offline-storage-with-localforage-obd?comments_sort=top