前端存储loaclForage

Posted 2020-10-29 栴檀

以前使用本地存储，首先会想到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

• 1

或者

bower install localforage

• 1

基本用法：

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);
    }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

存储 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‘
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

参考链接：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