使用 HTML5 Web 存儲實現離線工做:

使用 Web 存儲添加離線功能

HTML5 是一個新的 HTML 標準，它擁有大量新的功能和佈局技術。它徹底支持多媒體、CSS3 以及使用畫布和可縮放矢量圖形 (Scalable Vector Graphics, SVG) 的繪圖功能。HTML5 提供了新的語義元素，還提供了恰當的使用應用程序緩存器、JavaScript worker、新版本的             XMLHttpRequest 和一種名爲 Web 存儲的工具建立 HTML Web 應用程序的方式。本文將探討 Web 存儲的強大功能，以及它成爲一種優於 cookies 的存儲方法的緣由。經過本文您將瞭解基本概念、瀏覽器支持和 HTML5 Web 存儲對象。

 

概述

Cookies 從 JavaScript 出現之初就一直存在，因此在 Web 上存儲數據並非個新概念。不過Web 存儲是數據存儲的一種更爲強大的版本，可提供更多的安全性、速度和易用性。在 Web 存儲中還能夠存儲數量巨大的數據。具體的數量則取決於 Web 瀏覽器，但一般都在 5MB 到10MB 之間，這對於一個 HTML 應用程序而言已經足夠大。另外一個好處是此數據並不會在每次出現服務器請求時都被加載。唯一的限制是不能在瀏覽器之間分享 Web 存儲, 若是您在 Safari 中存儲了數據，那麼該數據在 Mozilla Firefox 中是沒法訪問的。

內置到 HTML5 中的 Web 存儲對象有兩種類型：

• sessionStorage 對象負責存儲一個會話的數據。若是用戶關閉了頁面或瀏覽器，則會銷燬數據。
• The localStorage 對象負責存儲沒有到期的數據。當 Web 頁面或瀏覽器關閉時，仍會保持數據的存儲，固然這還取決於爲此用戶的瀏覽器設置的存儲量。

經常使用的縮寫語

• API：應用程序編程接口 (Application Programming Interface)
• CSS：級聯樣式表 (Cascading Style Sheet)
• HTML：超文本標記語言 (HyperText Markup Language)
• JSON：JavaScript Serialized Object Notation

這兩種存儲對象具備相同的方法和屬性。爲了得到一致性，本文在全部的示例中使用的都是 localStorage 對象。

在本文中，咱們將瞭解  Web 存儲的強大功能，以及它成爲優於 cookies 的一種存儲方式的緣由。本文還將探索基本的 Web 存儲概念、HTML5 Web 存儲方法和瀏覽器支持。

 

 

 

瀏覽器支持

所 有最新的瀏覽器版本均支持 Web 存儲特性，這些瀏覽器包括 Firefox、Google Chrome、Safari、Opera 和 Microsoft® Windows® Internet Explorer® 8+。不幸地是，Internet Explorer 7 和更早版本不支持 Web 存儲。表 1 顯示了支持 HTML5 Web 存儲的每一個桌面瀏覽器版本。

表 1. HTML5 Web 存儲的桌面瀏覽器支持

Chrome	Firefox	Safari	Opera	Internet Explorer
4+	4+	4+	11+	8+

除了 Opera Mini 以外，其餘移動瀏覽器也提供了對 HTML5 Web 存儲的支持。表 2 顯示了支持 HTML5 Web 存儲的每一個移動瀏覽器版本。

表 2. HTML5 Web 存儲的移動瀏覽器支持

iOS	Android	Opera Mini	Opera Mobile
5+	3+	NA	11+

HTML5 Web 存儲的瀏覽器支持十分使人矚目。可是，較老的瀏覽器要求在使用以前檢查 Web 存儲支持的瀏覽器。爲了瞭解 Web 存儲支持而對瀏覽器進行檢查很是簡單。可使用一個簡單的條件語句來查看 HTML5 存儲對象是否已經定義。若是已經定義，就能夠放心進行 Web 存儲腳本編寫。若是未定義，而數據存儲又是必需的，則須要採用一種備選方法，好比 JavaScript cookie。清單 1 的例子顯示了一種簡單的爲 Storage 對象進行瀏覽器檢查的方式。

清單 1.  Web 存儲支持的瀏覽器檢查

if(typeof(Storage)!== "undefined") {
  // Web storage is supported
}
else {
  // Web storage is NOT supported
}

若是瀏覽器不支持 Web 存儲，那麼您可使用 JavaScript cookie 或一個現有的庫（好比 AmplifyJS）來建立一個定製的 Web 存儲對象。AmplifyJS 是一組組件，旨在經過一個簡單的 API 解決常見 Web 應用程序問題，包括某些瀏覽器中的 Web 存儲支持。AmplifyJS 用 amplify.store 包裝程序來處理持久的客戶端存儲，它支持 Internet Explorer 5+、Firefox 2+、Safari 4+、Chrome、Opera 10.5+、iOS 2+ 和 Android 2+。這個庫還支持一個持久的 API 來處理跨瀏覽器存儲；您無需基於具體的瀏覽器編寫不一樣的代碼。若是瀏覽器支持 HTML5 Web 存儲，那麼 AmplifyJS 就會使用最新的存儲技術。若是瀏覽器不支持 HTML5 Web 存儲，那麼 AmplifyJS 就會降級，以支持沒有該功能的存儲。更多地瞭解 AmplifyJS 以及用於其存儲包裝程序的 API。

 

 

入門

有幾種簡單易用的方法可提供 HTML5 Web 存儲功能。這些方法支持設置一個鍵/值對，提供了兩個基於鍵來檢索某個值的選項，同時清除全部的鍵/值對，並刪除了某個特定的鍵/值對。表 3 顯示了可用的 HTML5 Web 存儲方法。

表 3. HTML5 Web 存儲方法

方法	描述
setItem(key, value)	爲 Web 存儲對象添加一個鍵/值對，供之後使用。該值能夠是任何的數據類型：字符串、數值、數組等。
getItem(key)	基於起初用來存儲它的這個鍵檢索值。
clear()	今後 Web 存儲對象清除全部的鍵/值對。
removeItem(key)	基於某個鍵今後 Web 存儲對象清除特定的鍵/值對。
key(n)	檢索 key[n] 的值。

在建立並將鍵/值對添加到此 Web 存儲對象時，可使用任何類型做爲鍵/值對中的值（字符串、數值、數組、對象等）。要存儲一個數組或對象，則必須使用 JSON 對象經過 JSON.stringify 方法將數據轉換爲一個字符串。在檢索此數據時，可使用 JSON.parse 進行檢索，它會返回原始狀態的對象或數據。還有兩種向 Web 存儲對象添加鍵/值對的不一樣方式。第一種方式是使用 setItem 方法，如清單 2 所示。

清單 2. 使用 setItem 方法向 Web 存儲對象添加鍵/值對

localStorage.setItem('myKey', 'myValue');

向 Web 存儲對象添加鍵/值對的第二種方法是使用帶 dot 參數的 Web 存儲對象來直接設置此鍵的值，如清單 3 所示。

清單 3. 直接向 Web 存儲對象添加鍵/值對

localStorage.myKey = 'myValue';

檢索所存儲的值一樣十分簡單，也有兩種方式。第一種方式是使用 getItem 方法，它接受鍵做爲參數並返回相應的值（若是存在）。清單 4 顯示了一個示例。

清單 4. 使用 getItem 從 Web 存儲對象中檢索鍵/值對

localStorage.getItem('myKey');

從 Web 存儲對象中檢索鍵/值對的第二個方法是使用 dot 參數直接訪問它，如清單 5 所示。該示例返回了在以前的例子中設置的 'myValue' 字符串值。

清單 5. 直接從 Web 存儲對象中檢索鍵/值對

localStorage.myKey;

有兩種方法能夠刪除所存儲的數據。能夠同時刪除全部項，也能夠一次刪除個別項。要同時從 Web 存儲對象中刪除全部項，可使用 clear 方法，如清單 6 所示。

清單 6. 從 Web 存儲對象中刪除全部鍵/值對

localStorage.clear();

要從 Web 存儲對象中刪除單個鍵/值對，須要使用 removeItem 方法。清單 7 顯示了 removeItem 方法的一個示例，它接受一個鍵做爲參數，並肯定哪一個鍵/值對要今後存儲對象刪除。

清單 7. 從 Web 存儲對象中刪除單個鍵/值對

localStorage.removeItem('myKey');

清單 8 顯示了一個如何使用 JSON 對象經過 JSON.stringify 方法將一個數組存儲爲字符串的示例。能夠採用相同的方法處理對象。

清單 8. 在 HTML5 Web 存儲中將一個數組存儲爲字符串

var myArray = new Array('First Name', 'Last Name', 'Email Address');
localStorage.formData = JSON.stringify(myArray);

要從 Web 存儲檢索數組的字符串版本，並將它轉換回一個可用的 JavaScript 數組，只需使用 JSON.parse 方法，如清單 9 所示。

清單 9. 從 HTML5 Web 存儲中檢索數組的字符串版本並將它轉換成一個可用的 JavaScript 數組

var myArray = JSON.parse(localStorage.formData);

Internet Explorer 8+、Opera 10.5+、Firefox 3.5+、Safari 4+ 和 Chrome 均包括了一個本地的 JSON 對象，可使用該對象來支持以前例子中的那些代碼。若是您使用的是版本較早的瀏覽器，那麼能夠下載 json2.js 文件

到目前爲止，Web 存儲看起來很容易使用。可是，在開始使用以前，您應該意識到在共享的機器上會存在安全性問題。Web 存儲並不比 cookies 安全。因此不要在客戶端存儲敏感信息，好比密碼或信用卡信息。

 

 

工做中的 Web 存儲

介紹完基礎知識後，如今是時候將 HTML5 Web 存儲付諸於使用了。假設在您的網站上，您想要爲一個 Web 表單提供離線支持。若是用戶提交了表單，而且在網站恢復在線時讓此表單與服務器同步，那豈不是很不錯。HTML5 能夠實現此目標。

建立一個簡單的 Web 表單，其中包含姓名、電子郵件地址和提交按鈕，如清單 10 所示。

清單 10. 使用 HTML5 Web 存儲來存儲數據的一個簡單 Web 表單

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Web Storage</title>
<style type="text/css">
label, 
input {
  display: block;
}
input {
  margin-bottom: 10px;
}
</style>
</head>

<body>

<form action="post.php" method="post" id="web-storage-form">
  <label for="first-name">First name:</label>
  <input type="text" name="first-name" id="first-name">

  <label for="last-name">Last name:</label>
  <input type="text" name="last-name" id="last-name">

  <label for="email-address">Email Address:</label>
  <input type="text" name="email-address" id="email-address">

  <input type="submit" value="Submit">
</form>

</body>
</html>

此表單包含了一個 ID，可以使用 JavaScript 檢索表單 post 和值。此外，它還提供了 CSS，以建立具備表單元素的基本佈局。標籤和輸入上的 display:block 將每一個元素置於一個新行。margin-bottom 屬性在條目之間建立空間，讓頁面看起來不會太亂。

當用戶提交表單時，代碼首先會檢索 web-storage-form ID 並使用 jQuery 捕獲默認張貼，以阻止此張貼操做的發生。當張貼表單時，就能夠收集表單值以及此表單動做的 URL，以便將它們存儲在變量中。在做爲 Asynchronous JavaScript + XML (Ajax) post 發送表單值，或將它們存儲於 Web 存儲中時，您還須要序列化這些 Web 表單值。在提交表單以前，應該使用 navigator.onLine 屬性查看用戶當前是否在線。

若是用戶在線，則使用 jQuery.post 函數，這是一個簡略的 Ajax 函數，用於發送數據並從服務器接收數據。這個函數接受四個參數：數據被髮送到的 url、正在發送的 data（序列化後的表單值）、請求成功便會觸發的 callback 函數以及 dataType。在本例中，並未包括 dataType，因此會使用默認參數。

若是用戶不在線，那麼就可讓 Web 存儲一展身手了。首先也是很重要的一點是，使用 清單 1 中建立的條件語句來查看瀏覽器是否支持 Web 存儲。若是瀏覽器不支持 Web 存儲，則使用一個定製鍵將表單值直接存儲到 localStorage 對象中。本例使用了 formValues 定製鍵。localStorage 值的已經保存，如今能夠檢查當用戶恢復在線時這些值是否存在，作法是經過添加一個 if 語句來檢查 localStorage.formValues 是否有一個值。若是有一個值，則代表這個表單以前已經提交到 localStorage，並可使用先前設置好的 jQuery.post 方法安全地向服務器發送數據。在提交值以後，應該從 Web 存儲中將它們刪除，以防止意外地重複提交它們。清單 11 顯示了從使用 Ajax 的表單張貼到 localStorage 期間所需代碼。

清單 11. 離線時將表單數據存儲於 localStorage，在線時將其提交到服務器

<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
  // Check for web storage values from a previous offline session
  if(localStorage.formValues) {
    console.log("localStorage.formValues: "+ localStorage.formValues);
    postForm($("#web-storage-form").attr('action'), localStorage.formValues);
    localStorage.removeItem("formValues");
  }

  $("#web-storage-form").submit(function(event) {
    // Prevent the form from posting
    event.preventDefault(); 

    // Gather values
    var formValues = $(this).serialize();
    var url = $(this).attr('action');
    postForm(url, formValues);
  });
 });

function postForm(url, formValues) {
  // Post to server or post to web storage
  if(navigator.onLine) {
    console.log("Online");
    $.post(url, formValues, function(data) {
      console.log("Success: "+ data);
    });
  }
  else {
    console.log("Offline");
    if(typeof(Storage) !== "undefined") {
      console.log("Storage supported");
      localStorage.formValues = formValues;
    }
  }
}
</script>

爲了建立一個完整的例子，使用 post.php 文件充當表單張貼的結尾，用以接收和響應表單請求。這個文件只簡單接收表單張貼並經過打印鍵/值對進行響應，如清單 12 所示。當 jQuery.post 收到響應後，就能夠未來自響應的數據寫入控制檯了。

清單 12. 可響應表單請求的 PHP 文件

<?php print_r($_POST); ?>

固然，您還可讓這個例子更爲健壯。好比，您能夠在服務器端上提供數據庫存儲，並使用一個間隔來檢查 localStorage，以便隨時監視用戶的計算機是否恢復在線，從而提交表單數據。

 

回頁首

結束語

HTML5 提供了一組強大的新功能，並迅速得到了主要 Web 瀏覽器的最新版本的支持。Web 存儲是 HTML5 衆多引人注目的特性中的一個。可是，務必巧妙使用它。對於 cookie，用戶能夠關閉 Web 存儲。始終都要有一個備案，以便支持那些不想使用此新功能的用戶。