本地存储localForage可以存储大量本地离线数据

localForage 是一个 JavaScript 库。localForage 有一个优雅降级策略，会优先级使用 IndexedDB其次WebSQL，如果不支持则使用 localStorage。

既然要存储的数量大，得排除cookie
localStorage，虽然比cookie多，但是同样有上限（5M）左右，备选
websql 使用简单，存储量大，兼容性差，备选
indexDB api多且繁琐，存储量大、高版本浏览器兼容性较好，理论上是硬件有多大内存就可以存多少，基本最小是250M起步，备选

所以在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。下面是 indexDB、web sql、localStorage 的一个浏览器支持情况，可以发现，兼容性方面loaclForage基本上满足99%需求。

安装：

npm install localforage
或者
// 直接引用
<script src="localforage.js"></script>
<script>console.log('localforage is: ', localforage);</script>

获取值

localforage.getItem('somekey').then(function(value) {
    // 当离线仓库中的值被载入时，此处代码运行
    console.log(value);
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});

// 回调版本：
localforage.getItem('somekey', function(err, value) {
    // 当离线仓库中的值被载入时，此处代码运行
    console.log(value);
});

设置值

存储的数据类型

将数据保存到离线仓库。你可以存储如下类型的 JavaScript 对象：

Array
ArrayBuffer
Blob
Float32Array
Float64Array
Int8Array
Int16Array
Int32Array
Number
Object
Uint8Array
Uint8ClampedArray
Uint16Array
Uint32Array
String

//字符串
localforage
  .setItem("somekey", "some value")
  .then(function (value) {
    // 当值被存储后，可执行其他操作
    console.log(value);
  })
  .catch(function (err) {
    // 当出错时，此处代码运行
    console.log(err);
  });


//数组
// 不同于 localStorage，你可以存储非字符串类型
localforage
  .setItem("my array", [1, 2, "three"])
  .then(function (value) {
    // 如下输出 `1`
    console.log(value[0]);
  })
  .catch(function (err) {
    // 当出错时，此处代码运行
    console.log(err);
  });


//数据流
// 你甚至可以存储 AJAX 响应返回的二进制数据
req = new XMLHttpRequest();
req.open("GET", "/photo.jpg", true);
req.responseType = "arraybuffer";

req.addEventListener("readystatechange", function () {
  if (req.readyState === 4) {
    // readyState 完成
    localforage
      .setItem("photo", req.response)
      .then(function (image) {
        // 如下为一个合法的 <img> 标签的 blob URI
        var blob = new Blob([image]);
        var imageURI = window.URL.createObjectURL(blob);
      })
      .catch(function (err) {
        // 当出错时，此处代码运行
        console.log(err);
      });
  }
});

删除存储

localforage.removeItem('somekey').then(function() {
    // 当值被移除后，此处代码运行
    console.log('Key is cleared!');
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});

清空存储

localforage.clear().then(function() {
    // 当数据库被全部删除后，此处代码运行
    console.log('Database is now empty.');
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});

https://localforage.docschina.org/