如何使用 localForage 轻松实现浏览器异步存储

localForage是一个方便的包装图书馆,可平滑浏览器数据库的粗糙景观,其中有几个:

localStorage
索引DB
和 Web SQL

每个选项最初都是以同样的目的设计的:在浏览器中提供持久的存储空间. 现实是,每个选项都有独特的优势和局限性,可以使浏览器中的简单数据库任务需要数小时的文档阅读。

<$>[注] 安装 localForage 运行: $ npm install localforage <$>

使用 LocalForage 的好处

localForage通过提供模仿 localStorage的简单API来解决这个问题,同时包括其他强大的数据库的其他功能(如 IndexedDB 提供的存储 blobs的能力)。

下面我将介绍一些你在使用 localForage 时会发现的好处,以及一些使用例子!

模仿本地存储 API

你已经知道 localForage 的 API,如果你知道 localStorage!

 1import localForage from 'localforage';
 2const foo = 'hello world';
 3
 4// Setting...
 5localStorage.setItem('myuniquekey', foo);
 6localForage.setItem('myuniquekey', foo);
 7
 8// Getting...
 9localStorage.getItem('myuniquekey');   //=> 'hello world'
10localForage.getItem('myuniquekey');    //=> 'hello world'

许多 localStorage 方法,如 removeItem(), clear(), keys() 和 length() 在 localForage 中可用,这使得 webdevs 几乎毫不费力地处理它!

无需严肃化

也许使用 localForage 的最大好处之一是您不需要对价值观进行序列化!

 1const foo = {
 2  greeting: 'hello world'
 3};
 4
 5localStorage.setItem('myuniquekey', JSON.stringify(foo));
 6JSON.parse(localStorage.getItem('myuniqekey'));
 7//=> {
 8//     greeting: 'hello world'
 9//   };
10
11localForage.setItem('myuniquekey', foo); // 🤯
12localForage.getItem('myuniquekey');
13//=> {
14//     greeting: 'hello world'
15//   };

使用 localForage 存储值感觉比 localStorage 更无缝,这可以用各种值(如 [ 序列、数字、文件等)(https://localforage.github.io/localForage/#data-api-setitem))工作,让你跳过序列化值的头痛。

localForage 是非同步

localStorage 是同步的,对于小值(如短字符串或数字)来说这并不明显,但是当您需要与大数组/对象工作时,它确实很慢,因为它们需要(https://andsky.com/tech/tutorials/js-json-parse-stringify)。

localForage 是完全无同步的,提供回调或 ES6 Promise接口,这使得它比任何同步库都更有效,因为它不会阻止 thread的使用。

 1const foo = {
 2  greeting: 'hello world'
 3};
 4
 5// ES6 Promise
 6localForage.setItem('myuniquekey', foo)
 7  .then((value) => {})    // do something with "foo"
 8  .catch((error) => {});  // handle errors
 9
10// Callback
11localForage.setItem('myuniquekey', foo, (error, value) => {});

这是很好的,你可以选择回调或承诺界面!

仁慈的堕落

默认情况下, localForage 更喜欢使用这些数据库(以此特定顺序):

索引DB 2 WebSQL 3 localStorage

例如,WebSQL在Firefox Desktop上不可用,所以它会降级到 localStorage。

但是,如果您想设置不同的倒退数据库顺序,您可以使用setDriver()或config()方法:

 1import localForage from 'localforage';
 2
 3// Using setDriver()
 4localForage.setDriver([
 5  localForage.INDEXEDDB,
 6  localForage.LOCALSTORAGE,
 7  localForage.WEBSQL,
 8]);
 9
10// Using config()
11localForage.config({
12  driver: [
13    localForage.INDEXEDDB,
14    localForage.LOCALSTORAGE,
15    localForage.WEBSQL,
16  ],
17  name: 'myApp',     // These fields
18  version: 1.0,      // are totally optional
19});

如果您想要为 localForage 提供一个专属的数据库,请将单个值传输,而不是数组!

1localForage.setDriver(localForage.LOCALSTORAGE);

请注意,在使用 localForage 与数据库进行交互之前,应放置setDriver()和config()方法。

包装上

localForage 是一个易于使用和强大的浏览器存储库! 它是由 Mozilla 开发的,并且非常好的维护。请访问 docs 网站有关 localForage 如何为您工作的更多指导