轉:http://www.cnblogs.com/lhb25/p/localforage-offline-storage-improved.html
Web 應用程序有離線功能,如保存大量數據集和二進制文件。你甚至可以做緩存 MP3 文件這樣的事情。瀏覽器技術可以保存離線數據和大量的儲存。但問題是,如何選擇合適技術,如何方便靈活的實現。
如果你需要開發一個支持離線存儲的 Web 應用程序,不知道從哪裏開始,那麼這篇文章正是你需要的。
localStorage 能夠讓你實現基本的數據存儲,但它的速度慢,而且不能處理二進制數據。IndexedDB 和 WebSQL 是異步的,速度快,支持大數據集,但他們的API 使用起來有點複雜。不僅如此,IndexedDB 和 WebSQL 沒有被所有的主流的瀏覽器廠商支持,這種情況最近也不太可能改變。
Mozilla 開發了一個叫 localForage 的庫 ,使得離線數據存儲在任何瀏覽器都是一項容易的任務。
localForage 是一個使用非常簡單的 JavaScript 庫的,提供了 get,set,remove,clear 和 length 等等 API,還具有以下特點:
支持回調的異步 API;
支持 IndexedDB,WebSQL 和 localStorage 三種存儲模式(自動爲你加載最佳的驅動程序);
支持 BLOB 和任意類型的數據,讓您可以存儲圖片,文件等等。
支持 ES6 Promises;
對 IndexedDB 和 WebSQL 的支持使您可以爲您的 Web 應用程序存儲更多的數據,要比 localStorage 允許存儲的多很多。其 API 的無阻塞性質使得您的應用程序更快,不會因爲 Get/Set 調用而掛起主線程。
localStorage
傳統的 API 在許多方面其實是很不錯的,使用簡單,沒有複雜的數據結構。如果你在你的應用程序有一個配置信息需要保持,可以這樣寫:
// 需要離線保存的配置數據
var config = {
fullName: document.getElementById('name').getAttribute('value'),
userId: document.getElementById('id').getAttribute('value')
};
// 保存起來,供下次使用
localStorage.setItem('config', JSON.stringify(config));
// 從離線存儲中讀取出來
var config = JSON.parse(localStorage.getItem('config'));
請注意,使用 localStorage 存儲的數據需要保存爲字符串,所以我們在保存和讀取時需要進行 JSON 序列化和反序列化。
看起來好像使用很簡單,但你很快會發現 localStorage 的幾個問題:
- 它是同步的。不管數據多大,我們需要等待數據從磁盤讀取和解析,這會減慢我們的應用程序的響應速度。這在移動設備上是特別糟糕的,主線程被掛起,直到數據被取出,會使你的應用程序看起來慢,甚至沒有反應。
- 它僅支持字符串。需要使用 JSON.parse 與 JSON.stringify 進行序列號和反序列化。這是因爲 localStorage 中僅支持 JavaScript 字符串值。不支持數值,布爾值,Blob 類型的數據。
localForage
localForage 可以解決上面的問題,下面我們對比一下 IndexedDB 和 localForage 存儲相同數據的差異:
IndexedDB 代碼:
// IndexedDB.
var db;
var dbName = "dataspace";
var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ];
var request = indexedDB.open(dbName, 2);
request.onerror = function(event) {
// 錯誤處理
};
request.onupgradeneeded = function(event) {
db = event.target.result;
var objectStore = db.createObjectStore("users", { keyPath: "id" });
objectStore.createIndex("fullName", "fullName", { unique: false });
objectStore.transaction.oncomplete = function(event) {
var userObjectStore = db.transaction("users", "readwrite").objectStore("users");
}
};
var transaction = db.transaction(["users"], "readwrite");
// 所有數據都添加到數據後調用
transaction.oncomplete = function(event) {
console.log("All done!");
};
transaction.onerror = function(event) {
// 錯誤處理
};
var objectStore = transaction.objectStore("users");
for (var i in users) {
var request = objectStore.add(users[i]);
request.onsuccess = function(event) {
// 裏面包含我們需要的用戶信息
console.log(event.target.result);
};
}
使用 WebSQL 實現可能不會那麼太冗長,但也是有點複雜。使用 localForage,可以這樣寫:
localForage 代碼:
// 保存用戶信息
var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ];
localForage.setItem('users', users, function(result) {
console.log(result);
});
是不是簡單了很多?
支持非字符串數據
比方說,你要下載一個用戶的個人資料圖片,並對其進行緩存以供離線使用。使用 localForage 很容易保存二進制數據:
// 使用 AJAX 下載圖片
var request = new XMLHttpRequest();
// 以獲取第一個用戶的資料圖片爲例
request.open('GET', "/users/1/profile_picture.jpg", true);
request.responseType = 'arraybuffer';
// 當 AJAX 調用完成,把圖片保存到本地
request.addEventListener('readystatechange', function() {
if (request.readyState === 4) { // readyState DONE
// 保存的是二進制數據,如果用 localStorage 就無法實現
localForage.setItem('user_1_photo', request.response, function() {
// 圖片已保存,想怎麼用都可以
});
}
});
request.send()
下次,只用三行代碼就可以從緩存中把照片讀取出來:
localForage.getItem('user_1_photo', function(photo) {
// 獲取到圖片數據後,可以通過創建 data URI 或者其它方法來顯示
console.log(photo);
});
Callbacks & Promises
如果你不喜歡在你的代碼中使用回調,你可以使用 ES6 Promises,來替換 localForage 的回調參數。讓我們使用上面的照片例子,看下使用 Promises 的代碼:
localForage.getItem('user_1_photo').then(function(photo) {
// 獲取到圖片數據後,可以通過創建 data URI 或者其它方法來顯示
console.log(photo);
});
跨瀏覽器支持
localForage 支持所有現代瀏覽器(包括 IE8 及更高版本)。支持的瀏覽器和平臺如下:
Android Browser 2.1
Blackberry 7
Chrome 23 (Chrome 4.0 with localStorage)
Chrome for Android 32
Firefox 10 (Firefox 3.5 with localStorage)
Firefox for Android 25
Firefox OS 1.0
IE 10 (IE 8 with localStorage)
IE Mobile 10
Opera 15 (Opera 10.5 with localStorage)
Opera Mobile 11
Phonegap/Apache Cordova 1.2.0
Safari 3.1 (includes Mobile Safari)