localForage——輕鬆實現 Web 離線存儲 - 網站設計及開發

65412543

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);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 及更高版本）。支持的瀏覽器和平台如下： 
 

GitHub      立即下載

 
  

stk190

我分享一下囉

Disy

我的媽呀，愛死你了

coffyma

我在努力中

oh~my~gag

像蝴蝶一樣漂亮的帖子

十兵衛

拿分走人呵呵，樓下繼續！

juny0385

認真回覆每一篇，希望能得到好分數

Tung8887

樓主在那邊抄的呢

Disy

看完了這麼強的文章，我想說點什麼，但是又不知道說什麼好，想來想去只想

tamyc002

哈哈，看的人少，回一下