本地存储之——localForage使用

  介绍  

---

localForage是一个基于indexedDB封装的JavaScript库，它通过类似localStorage API的异步存储来改进Web应用程序的离线体验，通过它我们可以简化IndexedDB的使用。localForage可以存储多种类型的数据，而不仅仅是字符串，它具有优雅降级策略，如果浏览器不支持IndexedDB或WebSQL，则使用localStorage。它在所有主流浏览器中都可以使用，包括Chrome、Firefox、IE和Safari（包括Safari Mobile）。

  实现原理  

---

localForage的原理主要基于Web浏览器中的两种存储机制：LocalStorage和IndexedDB

localforage在使用LocalStorage进行数据存储时，会将数据转换为JSON格式，并将其存储在浏览器的LocalStorage中。这种方式适用于存储较小量的数据，例如用户的配置信息或简单的缓存数据。

当需要存储大量结构化数据时，localforage会自动选择使用IndexedDB进行存储。IndexedDB是一种基于对象存储的数据库，它提供了更高级的查询和索引功能，使开发人员能够更方便地对数据进行操作。

localforage的工作方式非常灵活，开发人员可以根据自己的需求选择存储数据的方式。例如，可以通过设置数据优先级来指定首选的存储方式，或者在运行时根据浏览器的支持情况自动选择存储方式。

  如何使用  

---

1、下载

import localforage from 'localforage'

2、创建一个indexedDB

const myIndexedDB = localforage.createInstance({
    name: 'myIndexedDB'
})

3、存值

myIndexedDB.setItem('key', value)

4、取值

由于indexedDB的存取都是异步的，建议使用 promise.then() 或 async/await 去读值

myIndexedDB.getItem('somekey').then(function (value) {
  // value
}).catch(function (err) {
  // error
});

或者：

try {
  const value = await myIndexedDB.getItem('key');
  console.log(value);
} catch (err) {
  console.log(err);
}

5、删除某项

myIndexedDB.removeItem('somekey')

6、清空存储数据

myIndexedDB.clear()

  浏览器兼容性  

---