js-實作 Web 離線存儲localForage

轉：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 的幾個問題：

1. 它是同步的。不管資料多大，我們需要等待資料從磁盤讀取和解析，這會減慢我們的應用程式的響應速度。這在移動裝置上是特别糟糕的，主線程被挂起，直到資料被取出，會使你的應用程式看起來慢，甚至沒有反應。
2. 它僅支援字元串。需要使用 JSON.parse 與 JSON.stringify 進行序列号和反序列化。這是因為 localStorage 中僅支援 JavaScript 字元串值。不支援數值，布爾值，Blob 類型的資料。

localForage

localForage 可以解決上面的問題，下面我們對比一下 IndexedDB 和 localForage 存儲相同資料的差異：

IndexedDB 代碼：

// IndexedDB.
var db;
var dbName = "dataspace";
var users = [ {id: , fullName: 'Matt'}, {id: , fullName: 'Bob'} ];
var request = indexedDB.open(dbName, );
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: , fullName: 'Matt'}, {id: , 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 === ) { // 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)