改进版离线存储之 localForage

1.什么是 localForage

localForage 是一个 JavaScript 库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。

localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile)。

2.为什么要使用 locaForage

• 异步离线存储，以免阻塞应用程序
• 用法上靠近 Promise, 方便执行回调
• 写法简单，类似 Web Storage API
• 支持存储多种类型数据:
  Array
  ArrayBuffer
  Blob
  Float32Array
  Float64Array
  Int8Array
  Int16Array
  Int32Array
  Number
  Object
  Uint8Array
  Uint8ClampedArray
  Uint16Array
  Uint32Array
  String
• 支持强制设置特定的驱动：IndexedDB、Web SQL、localStorage
• 存在降级策略：若不支持 IndexedDB 或 Web SQL, 则使用 localStorage
• 适合存储大量数据

3.如何使用 locaForage

3.1 安装

npm install localforage

3.2 API 使用

localForage 提供回调 API 同时也支持 ES6 Promises API.

回调 API 形式

localforage.setItem('key', 'value', function (err) {
  // if err is non-null, we got an error
  localforage.getItem('key', function (err, value) {
    // if err is non-null, we got an error. otherwise, value is the value
  });
});

ES6 Promises 形式

localforage.setItem('key', 'value').then(function () {
  return localforage.getItem('key');
  }).then(function (value) {
    // we got our value
  }).catch(function (err) {
    console.log(err);
});

或使用 async / await 形式

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

多个实例

createInstance 创建并返回一个 localForage 的新实例。每个实例对象都有独立的数据库，而不会影响到其他实例

var store = localforage.createInstance({
  name: "nameHere"
});

var otherStore = localforage.createInstance({
  name: "otherName"
});

// 设置某个数据仓库 key 的值不会影响到另一个数据仓库
store.setItem("key1", "value1");
otherStore.setItem("key2", "value2");

图片

4.常用浏览器存储方案对比

4.1 Cookie

存储 cookie 是浏览器的功能，浏览器下有一个 cookie 文件夹专门存放各个域下设置的 cookie
缺点：

1. 存储空间有限: 约 4K
2. 每次向服务器发请求都会被携带，增加 Web 请求大小
3. 只能存储字符串

4.2 Web Storage

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

缺点:

1. 操作过程是同步的会阻塞主线程
2. 存储大小约 5MB(不同浏览器，限制值不一样)
3. 只能存储字符串

4.3 WebSQL(使用较少，暂不介绍)

4.4 IndexedDB

浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。

就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

特点：

1. 键值对存储： 内部采用对象仓库（Object store）存放数据。所有类型数据都可以直接存入。对象仓库中，数据以”键值对“形式保存，每个数据记录都有对应的主键

2. 异步：防止大量数据的读写，拖慢网页的展现

3. 支持事务：意味着一系列操作步骤中，只要有异步失败，整个事务就都取消，数据库回滚到事务发生之前的记录，不存在只改写部分数据的情况

4. 同源限制：每个数据库对应创建他的域名，网页只能访问自身域名下的数据库，而不能访问跨域数据库

5. 存储空间大： 取决于硬件。

   • Chrome 允许浏览器使用多达 80% 的总磁盘空间。一个源最多可以使用总磁盘空间的 60%。
   • IE 10 及以上最多可存储 250MB
   • Firefox 允许浏览器使用多达 50% 的可用磁盘空间
   • Safari 允许大约 1GB

6. 支持二进制存储

缺点:
与大多数现代基于 Promise 的 API 不同，它是基于事件的，在使用前需要学习相关 API 进行设置，增加学习成本。

参考文章：

1.IndexedDB 入门教程

2.localForage 中文文档