前端存儲loaclForage

之前使用本地存儲，首先會想到localstorage或者session storage,將要存儲的數據轉化成字符串後進行setItem操做，可是使用local storage 有幾個問題： 
一、它是同步的，無論數據多大，咱們須要等待數據從磁盤讀取和解析，這會減慢咱們的應用程序的響應速度，若是放到移動設備上，可想而之。 
二、僅支持字符串，若是是存對象還須要將對象JSON.stringify({name:」houyuewei」,age:20})下，用的時候再次轉換，真是麻煩。 
三、不能加密存儲到硬盤上，增長了不少危險性。 
四、永久存儲，而且存儲容量限制在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