前端存储loaclForage

以前使用本地存储，首先会想到localstorage或者session storage,将要存储的数据转化成字符串后进行setItem操作，但是使用local storage 有几个问题：
1、它是同步的，不管数据多大，我们需要等待数据从磁盘读取和解析，这会减慢我们的应用程序的响应速度，如果放到移动设备上，可想而之。
2、仅支持字符串，如果是存对象还需要将对象JSON.stringify({name:”houyuewei”,age:20})下，用的时候再次转换，真是麻烦。
3、不能加密存储到硬盘上，增加了很多危险性。
4、永久存储，并且存储容量限制在10M

LocalForage就解决了上面的问题，Mozilla 开发了一个叫 localForage 的库，使得离线数据存储在任何浏览器都是一项容易的任务。localForage 是一个使用非常简单的 JavaScript 库的，提供了 get，set，remove，clear 和 length 等等 API，还具有以下特点：
支持回调的异步 API；
支持 IndexedDB，WebSQL 和 localStorage 三种存储模式；
支持 BLOB 和任意类型的数据，让您可以存储图片，文件等。
支持 ES6 Promises
支持angularjs,requires,embers等

安装
可以通过npm或者bower安装

npm install localforage

或者

bower install localforage

基本用法：

key/value
localforage.setItem('key', 'value', doSomethingElse);
对象
var obj = { value: "hello world" };
localforage.setItem('key', obj, function(err, result) { alert(result.value); });

回调
localforage.getItem('key', function(err, value) {
    if (err) {
        console.error('Oh noes!');
    } else {
        alert(value);
    }
});

存储 Blobs，TypedArray（具体的类型附在参考链接中）,其他的js对象
为了支持这几种类型，需要做一个配置，如下：

localforage.config({
    driver      : localforage.WEBSQL, // Force WebSQL; same as using setDriver()
    name        : 'myApp',
    version     : 1.0,
    size        : 4980736, // Size of database, in bytes. WebSQL-only for now.
    storeName   : 'keyvaluepairs', // Should be alphanumeric, with underscores.
    description : 'some description'
});

参考链接：https://developer.mozilla.org/en-US/Apps/Build/Offline
https://github.com/mozilla/localForage#how-to-use-localforage
https://mozilla.github.io/localForage/#setitem
http://www.html5rocks.com/en/tutorials/offline/storage/
http://www.html5rocks.com/en/tutorials/offline/whats-offline/
https://www.nczonline.net/blog/2010/04/13/towards-more-secure-client-side-data-storage/

转载自 https://blog.csdn.net/houyaowei/article/details/51445566