前端存储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
- 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