localForage——輕鬆實現 Web 離線存儲

　　Web 應用程序有離線功能，如保存大量數據集和二進制文件。你甚至能夠作緩存 MP3 文件這樣的事情。瀏覽器技術能夠保存離線數據和大量的儲存。但問題是，如何選擇合適技術，如何方便靈活的實現。
　　若是你須要開發一個支持離線存儲的 Web 應用程序，不知道從哪裏開始，那麼這篇文章正是你須要的。
您可能感興趣的相關文章 九個使人難以想象的 WebGL 應用試驗
讓你忘記 Flash 的15款 HTML5 遊戲
10款流行的 jQuery 插件，值得你收藏
小夥伴們驚呆了！8個超炫的 Web 效果
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)

 
GitHub      當即下載
 
您可能感興趣的相關文章
10大流行 Metro UI Bootstrap 主題和模板
精選12款優秀 jQuery Ajax 分頁插件和教程
10大流行的 Metro UI 風格 Bootstrap 主題
8款效果精美的 jQuery 加載動畫和進度條插件
推薦35款精緻的 CSS3 和 HTML5 網頁模板

  
本文連接：localForage：輕鬆實現 Web 離線存儲 via Mozilla
編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源
本文來自【夢想天空（http://www.cnblogs.com/lhb25/）】
轉載於猿2048:➽《localForage——輕鬆實現 Web 離線存儲》