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)
本文鏈接：localForage：輕松實現 Web 離線存儲 via Mozilla
編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源
本文來自【夢想天空（http://www.cnblogs.com/lhb25/）】