自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

淺談HTML 5的DOM Storage機制

作者：高 樂怡
開發(fā) 前端
HTML5 的 DOM Storage 機制提供了一種方式讓程序員能夠把信息存儲到本地的計算機上，在需要時獲取。這點和 cookie 相似，區(qū)別是 DOM Storage 提供了更大容量的存儲空間。

在開發(fā) Web 應用時，開發(fā)者有時需要在本地存儲數(shù)據(jù)。當前瀏覽器支持 cookie 存儲，但其大小有 4KB 的限制。這對于一些 Ajax 應用來說是不夠的。更多的存儲空間需要瀏覽器本身或是插件的支持，如 Google Gears 和 Flash。不過開發(fā)人員需要通過檢測當前瀏覽器所支持的插件類型來使用對應的接口。 HTML5 中新引入了 DOM Storage 機制，通過使用鍵值對在客戶端保存數(shù)據(jù)，并且提供了更大容量的存儲空間。本文將詳細論述 HTML5 對本地存儲的支持，并對存儲事件綁定和數(shù)據(jù)存儲與 JSON 的結合使用進行討論。當一些老版本的瀏覽器不支持 DOM Storage 時，可以考慮用其他的技術如 Dojo 來實現(xiàn)相同的功能。本文也會對其進行簡單的介紹。

HTML5 是下一代 HTML 標準，開始吸引越來越多人的目光。HTML5 的 DOM Storage 機制提供了一種方式讓程序員能夠把信息存儲到本地的計算機上，在需要時獲取。這點和 cookie 相似，區(qū)別是 DOM Storage 提供了更大容量的存儲空間。

 

目前，在客戶端保存數(shù)據(jù)使用最多的是 cookie，但 cookie 的大小上限為 4KB，并且每次請求一個新頁面時 cookie 都會被發(fā)送過去。更多的存儲空間需要瀏覽器本身或是插件的支持，例如只在 Internet Explorer 上使用的 userData，需要額外安裝插件的 Google Gears 和 Flash?，F(xiàn)在，HTML5 提供了一種標準的接口，使程序員可以簡單地訪問存儲的數(shù)據(jù)。由于鍵值對存儲在本地計算機上，在頁面加載完畢后可以通過 JavaScript 來操作這些數(shù)據(jù)。

DOM Storage

示例應用程序：用戶注冊

本文使用的示例應用程序是一個簡單的用戶注冊過程，表單包含三個字段：name、age 和 address，我們將其拆分為兩個表單，分兩個頁面顯示。借助簡化了的數(shù)據(jù)模型，主要介紹如何利用 DOM Storage 功能處理表單跨頁問題。

DOM Storage 兩個分類

DOM Storage 分為 sessionStorage 和 localStorage。

localStorage 對象和 sessionStorage 對象使用方法基本相同，它們的區(qū)別在于作用的范圍不同。sessionStorage 用來存儲與頁面相關的數(shù)據(jù)，它在頁面關閉后無法使用。而 localStorage 則持久存在，在頁面關閉后也可以使用。

DOM Storage 接口

下面是 DOM Storage 的接口定義：

  1. interface Storage {   
  2.   readonly attribute unsigned long length;   
  3.   getter DOMString key(in unsigned long index);   
  4.   getter any getItem(in DOMString key);   
  5.   setter creator void setItem(in DOMString key, in any data);   
  6.   deleter void removeItem(in DOMString key);   
  7.   void clear();   
  8.  };  

length：返回當前存儲在 Storage 對象中的鍵值對數(shù)量。

key(index)：返回列表中第 n 個鍵的名字。Index 從 0 開始。

getItem(key)：返回指定鍵對應的值。

setItem(key, value)：存入一個鍵值對。

removeItem(key) ：刪除指定的鍵值對。

clear()：刪除 Storage 對象中的所有鍵值對。

通常，使用最多的方法是 getItem 和 setItem。

以 sessionStorage 為例：

存儲鍵值對：

window.sessionStorage.setItem(“key1”, value1);

通過鍵名來讀取值：

var value1 = window.sessionStorage.getItem(“key1”);

判斷瀏覽器是否支持 DOM Storage

要使用 DOM Storage，首先，需要查看當前的瀏覽器是否支持。目前 Internet Explorer 8.0 以上，F(xiàn)irefox 3.5 以上，Chrome 4.0 以上都是支持 DOM Storage 的。

如果瀏覽器不支持 DOM Storage，可以用其他的方法作為備選，本文還使用 Dojo 提供的 dojox.storage 模塊來實現(xiàn)相同的功能。

清單 1. 查看瀏覽器是否支持 DOM Storage

  1. //sessionStorage   
  2.  if(window.sessionStorage){   
  3.     alert(“support sessionStorage”);   
  4.  }else{   
  5.     alert(“not support sessionStorage”);   
  6.     // 不支持 sessionStorage   
  7.     // 用 dojox.storage 來實現(xiàn)相同功能  
  8.  }   
  9.  
  10.  //localStorage   
  11.  if(window.localStorage){   
  12.     alert(“support localStorage”);   
  13.  }else{   
  14.     alert(“not support localStorage”);   
  15.     // 不支持 localStorage   
  16.     // 用 dojox.storage 來實現(xiàn)相同功能  
  17.  }  

下面是用戶注冊的兩個表單。清單 2 中的第一個表單有兩個字段 name 和 age 需要用戶填寫內容。填寫完后點擊 Next 按鈕進入下一個頁面，此時函數(shù) saveToStorage 會被調用，把在該頁面輸入的兩個字段的值保存到 sessionStorage 對象中。

當從下一個頁面退回到本頁面時，使用 windows.onload 在加載頁面的時候將數(shù)據(jù)從 sessionStorage 中取出，并顯示在輸入框中，方便用戶修改。

另外，給對象賦值除了用 setItem 方法外，也可以用 window.sessionStorage.key1 = “value1”。

清單 2. 第一個表單頁面

  1.               
  2. <script type="text/javascript">   
  3. // 當退回到第一個頁面時，從 sessionStorage 得到用戶之前輸入的值并顯示在頁面，方便修改  
  4. window.onload = function(){   
  5.    if (window.sessionStorage) {   
  6.        var name = window.sessionStorage.getItem("name");   
  7.        var age = window.sessionStorage.getItem("age");   
  8.        if (name != "" || name != null){   
  9.            document.getElementById("name").value = name;   
  10.        }   
  11.        if (age != "" || age != null){   
  12.            document.getElementById("age").value = age;   
  13.        }   
  14.    }else   
  15.    {   
  16.        // 不支持 sessionStorage，用 Dojo 實現(xiàn)相同功能  
  17.    }   
  18. };   
  19.  
  20. // 將數(shù)據(jù)保存到 sessionStorage 對象中  
  21. function saveToStorage() {   
  22.    //sessionStorage   
  23.    if (window.sessionStorage) {   
  24.        var name = document.getElementById("name").value;   
  25.        var age = document.getElementById("age").value;   
  26.        window.sessionStorage.setItem("name", name);   
  27.        window.sessionStorage.setItem("age", age);   
  28.        window.location.href="form2.html";   
  29.    } else {   
  30.        // 不支持 sessionStorage，用 Dojo 實現(xiàn)相同功能  
  31.    }   
  32. }   
  33. </script>   
  34.  
  35. <form action="./form2.html">   
  36.    <input type="text" name="name" id="name">   
  37.    <input type="text" name="age" id="age">   
  38.    <input type="button" value="Next" onclick="saveToStorage()"></input>   
  39. </form>   

清單 3 的第二個頁面有一個 address 字段。當用戶填寫完畢后，點擊 Submit 按鈕提交頁面，此時 addStorageValue 函數(shù)被調用，把保存在 sessionStorage 中的 name 和 age 值先賦給當前表單的兩個隱藏字段，隨后一起提交給下一個處理表單的頁面。最后調用 removeItem 函數(shù)刪除 name 和 age 值。

如果用戶需要修改第一個頁面填寫的內容，可以點擊 Back 按鈕回到前一個頁面，用戶在前一個頁面已經填寫的內容會出現(xiàn)在 text 框中。

清單 3. 第二個表單頁面

  1. <script type="text/javascript">   
  2.  // 將保持在 sessionStorage 中的數(shù)據(jù)賦給表單的隱藏屬性  
  3.  function addStorageValue() {   
  4.     //sessionStorage   
  5.     if (window.sessionStorage) {   
  6.         var name = window.sessionStorage.getItem("name");   
  7.         var age = window.sessionStorage.getItem("age");   
  8.         document.getElementById("name").value = name;   
  9.         document.getElementById("age").value = age;   
  10.         window.sessionStorage.removeItem("name");   
  11.         window.sessionStorage.removeItem("age");   
  12.     } else {   
  13.         // 不支持 sessionStorage，用 Dojo 實現(xiàn)相同功能  
  14.     }   
  15.  }   
  16.  
  17.  function backToPreviousForm() {   
  18.     window.location.href="form1.html";   
  19.  }   
  20.  </script>   
  21.  
  22.  <form action="./form3.php" method="post">   
  23.     <input type="hidden" name="name" id="name">   
  24.     <input type="hidden" name="age" id="age">   
  25.     <input type="text" name="address" id="address">   
  26.     <input type="button" value="Back" onclick="backToPreviousForm()">   
  27.     <input type="submit" value="Submit" onclick="addStorageValue()"></input>   
  28.  </form>  

 

 

#p#

使用 DOM Storage 需要注意的幾點

保存在 Storage 對象的數(shù)據(jù)類型

當使用 DOM Storage 進行本地存儲時，任何數(shù)據(jù)格式在 Storage 對象中都以字符串類型保存，所以如果保存的數(shù)據(jù)不是字符串，在讀取的時候需要自己進行類型的轉換。這里我們使用 JSON 將對象序列化之后再存儲。

JSON (JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。易于人閱讀和編寫，同時也易于機器解析和生成。目前，JSON 已經是 JavaScript 標準的一部分，主流的瀏覽器對 JSON 支持都非常完善。

本文用到兩個相關的函數(shù)

JSON.parse() 函數(shù)會把 JSON 對象轉換為原來的數(shù)據(jù)類型。

JSON.stringify() 函數(shù)會把要保存的對象轉換成 JSON 對象保存。

在清單 4 中，先把一個布爾型的數(shù)據(jù)存到 Storage 對象中，然后再取出，可以看到布爾類型的數(shù)據(jù)在取出的時候變?yōu)樽址?。接下來換一種方式保存數(shù)據(jù)，先用 JSON.stringify 方法序列化數(shù)據(jù)，然后保存到 Storage 對象中，在取出的時候用 JSON.parse 方法進行反序列化，可以看到讀取出的數(shù)據(jù)還是布爾類型。

另外，使用 JSON 保存一個字符串，通過 Chrome 的 Storage 工具，可以看到存入的字符串兩邊有雙引號，這個雙引號表示存入的是一個字符串。當用 JSON 表示一個簡單的字符串時，會在字符串兩邊加上雙引號。最后，該頁面加載后的輸出如下：

string1 boolean2 string3

清單 4. 使用 JSON 對 DOM Storage 的復雜數(shù)據(jù)進行處理

  1. // 生成一個 Boolean 類型的變量 data1   
  2.  var data1 = new Boolean(true);   
  3.  
  4.  // 不用 JSON 處理數(shù)據(jù)  
  5.  sessionStorage["key1"] = data1;   
  6.  if(sessionStorage["key1"] == "true"){   
  7.     // 從 Storage 對象讀取出來的數(shù)據(jù) data1 變?yōu)?nbsp;String 類型  
  8.     document.write("string1 ");   
  9.  }   
  10.  
  11.  // 使用 JSON 處理數(shù)據(jù) data1   
  12.  sessionStorage["key2"] = JSON.stringify(data1);   
  13.  if(JSON.parse(sessionStorage["key2"]) == true){   
  14.     // 從 Storage 對象讀取的數(shù)據(jù) data1，用 JSON 將變量轉換為原來的 Boolean 類型  
  15.     document.write("boolean2 ");   
  16.  }   
  17.  
  18.  // 生成一個 String 類型的變量  
  19.  var data2 = new String("true");   
  20.  // 使用 JSON 處理數(shù)據(jù)，在 Storage 對象中保存的是 “string”  
  21.  sessionStorage["key3"] = JSON.stringify(data2);   
  22.  data2 = JSON.parse(sessionStorage["key3"]);   
  23.  if(data2 == "true"){   
  24.     // 變量轉換回來還是 String 類型  
  25.     document.write("string3");   
  26.  }   

使用 Chrome 瀏覽器可以查看當前的 sessionStorage 和 localStorage 的鍵值對。在工具欄選擇“工具”到“開發(fā)人員工具”到“Resources”到“Local Storage”或“Session Storage”, 可以查看 key 和 value。

圖 1. Chrome 瀏覽器的 Storage 工具欄

 

圖 1. Chrome 瀏覽器的 Storage 工具欄

 

綜上所述，我們可以如清單 5 一樣，在加載頁面的時候用 JSON 轉換數(shù)據(jù)類型，在離開頁面的時候將數(shù)據(jù)保存為 JSON 對象。這樣，保存在 Storage 中任何類型的數(shù)據(jù)在讀取的時候都可以轉換為原來的類型。

清單 5. 使用 JSON 對 DOM Storage 的復雜數(shù)據(jù)進行處理

  1. <script type="text/javascript">   
  2.  var value;   
  3.  function loadValue() {   
  4.     value1 = JSON.parse(window.sessionStorage.getItem(“key1”));   
  5.  }   
  6.  function saveValue() {   
  7.     window.sessionStorage.setItem(“key1”) = JSON.stringify(value1);   
  8.  }   
  9.  
  10.  window.addEventListener(“load”, loadValue. true);   
  11.  window.add 

空間大小

HTML5 的建議是每個網站提供給 Storage 的空間是 5MB，一般來說足夠存字符串。如果存入的數(shù)據(jù)太大，有些瀏覽器如 Chrome 會拋出 QUOTA_EXCEEDED_ERR 異常。所以雖然 DOM Storage 提供的空間比 cookie 要大很多，但在使用需要注意限制。

圖 2. Chrome 瀏覽器拋出異常

 

圖 2. Chrome 瀏覽器拋出異常

 

安全性

一般不要在客戶端存儲敏感的信息，使用 localStorage、globalStorage 等在客戶端存儲的信息都非常容易暴露。應該在完成數(shù)據(jù)存儲后使用 clear 或者 removeItem 方法清除保存在 Storage 對象中的數(shù)據(jù)。

存儲事件驅動

如果想在存儲成功或修改存儲的值時執(zhí)行一些操作，可以用 DOM Storage 接口提供的事件?？梢允褂萌缦路椒ㄗ允录?/p>

window.addEventListener(“storage”, handleStorageEvent, false);

存儲事件接口定義

  1. interface StorageEvent : Event {  
  2. readonly attribute DOMString key;  
  3. readonly attribute any oldValue;  
  4. readonly attribute any newValue;  
  5. readonly attribute DOMString url;  
  6. readonly attribute Storage storageArea;  
  7. void initStorageEvent(in DOMString typeArg, in boolean canBubbleArg,   
  8. in boolean cancelableArg, in DOMString keyArg, in any oldValueArg,   
  9. in any newValueArg, in DOMString urlArg, in Storage storageAreaArg);  
  10. };   

key：發(fā)生改變的鍵。

oldValue：鍵改變之前的值。

newValue：鍵改變之后的值。

url：觸發(fā)存儲事件的頁面 url。

在清單 6 中注冊完存儲事件后，當 sessionStorage 或者 localStorage 對象的值發(fā)生改變時，會觸發(fā) handleStorageEvent 函數(shù)，在頁面顯示發(fā)生改變的鍵和改變之前與之后的值。

清單 6. 添加存儲事件

  1. // 顯示存儲事件的相關內容  
  2. function handleStorageEvent(e) {   
  3.    document.write(“key” + e.key + “oldValue” + e.oldValue + “newValue” + e.newValue);   
  4. }   
  5. // 添加存儲事件監(jiān)聽  
  6. window.addEventListener(“storage”, handleStorageEvent, false);  

使用 Dojo 實現(xiàn)之前用戶注冊的功能

Dojo 是一個 JavaScript 實現(xiàn)的開源工具包，很大程度上屏蔽了瀏覽器之間的差異性。Dojo 擴展庫 (dojox) 是 Dojo 在其基本庫、核心庫和 Dijit 庫的基礎上提供的一個非常豐富的組件倉庫。本文用到的 dojox.storage 模塊能夠將數(shù)據(jù)保存在本地存儲中，實現(xiàn)和之前 DOM Storage 一樣的功能。

由于一些老版本瀏覽器不支持 HTML5，我們還可以用 Dojo 來實現(xiàn)之前用戶注冊的功能。相對于 HTML5 的 DOM Storage 接口，Dojo 的 dojox.storage.Provider 接口提供的方法更多。這里我們列出幾個常用的方法。

get(key, namespace)：返回指定鍵對應的值。

put(key, value, resultsHandler, namespace)：存入一個鍵值對。

remove(key, namespace)：刪除指定的鍵值對。

clear(namespace)：刪除對象中的所有鍵值對。

現(xiàn)在對第一個表單的 JavaScript 代碼做部分修改，并在頁面中引入 dojox.storage 模塊。這樣，程序在不支持 HTML5 的瀏覽器中能夠通過調用 Dojo 提供的方法正常運行。dojo.require("dojox.storage") 表示引入 dojox.storage 功能模塊。然后通過 dojox.storage.manager.isInitialized() 查看 dojox.storage.manager 是否已經初始化，如果沒有的話，則需要等待其初始化完成之后，再進行存儲操作。

清單 7. 經過修改后的第一個表單頁面的部分代碼

  1. <script type="text/javascript">   
  2.  dojo.require("dojox.storage");   
  3.  // 當退回到第一個頁面時，從 Storage 中得到用戶之前輸入的值并顯示在頁面，方便修改  
  4.  // 這里先進行 dojox.storage.manager 的初始化  
  5.  if(!dojox.storage.manager.isInitialized()){   
  6.     dojo.connect(dojox.storage.manager, "loaded", saveAndLoad);   
  7.  } else{   
  8.     dojo.connect(dojo, "loaded", saveAndLoad);   
  9.  }   
  10.  function saveAndLoad(){   
  11.     var name;   
  12.     var age;   
  13.     //sessionStorage   
  14.     if (window.sessionStorage) {   
  15.         name = window.sessionStorage.getItem("name");   
  16.         age = window.sessionStorage.getItem("age");   
  17.         if (name != "" || name != null){   
  18.             document.getElementById("name").value = name;   
  19.         }   
  20.         if (age != "" || age != null){   
  21.             document.getElementById("age").value = age;   
  22.         }   
  23.     }//dojox.storage   
  24.     else   
  25.     {   
  26.         name = dojox.storage.get("name");   
  27.         age = dojox.storage.get("age");   
  28.         if (typeof name != "undefined" ){   
  29.             document.getElementById("name").value = name;   
  30.         }   
  31.         if (typeof age != "undefined" ){   
  32.             document.getElementById("age").value = age;   
  33.         }   
  34.     }   
  35.  }   
  36.  
  37.  // 保存數(shù)據(jù)  
  38.  function saveToStorage() {   
  39.     var name = document.getElementById("name").value;   
  40.     var age = document.getElementById("age").value;   
  41.     //sessionStorage   
  42.     if (window.sessionStorage) {   
  43.         window.sessionStorage.setItem("name", name);   
  44.         window.sessionStorage.setItem("age", age);   
  45.     }//dojox.storage   
  46.     else {   
  47.         dojox.storage.put("name", name);   
  48.         dojox.storage.put("age", age);   
  49.     }   
  50.     window.location.href="form2.html";   
  51.  }   
  52.  </script>  

清單 8. 經過修改后的第二個表單頁面的部分代碼

  1. <script type="text/javascript">   
  2.  dojo.require("dojox.storage");   
  3.  // 將保存在 sessionStorage 中的數(shù)據(jù)賦給表單的隱藏屬性  
  4.  function addStorageValue() {   
  5.     var name;   
  6.     var age;   
  7.     //sessionStorage   
  8.     if (window.sessionStorage) {   
  9.         name = window.sessionStorage.getItem("name");   
  10.         age = window.sessionStorage.getItem("age");   
  11.         document.getElementById("name").value = name;   
  12.         document.getElementById("age").value = age;   
  13.         window.sessionStorage.removeItem("name");   
  14.         window.sessionStorage.removeItem("age");   
  15.     }//dojox.storage   
  16.     else {   
  17.         name = dojox.storage.get("name");   
  18.         age = dojox.storage.get("age");   
  19.         document.getElementById("name").value = name;   
  20.         document.getElementById("age").value = age;   
  21.         dojox.storage.remove("name");   
  22.         dojox.storage.remove("age");   
  23.     }   
  24.  }   
  25.  
  26.  function backToPreviousForm() {   
  27.     window.location.href = "form1.html";   
  28.  }   
  29.  </script>  

結束語

HTML5 中引入了 DOM Storage 機制用于存儲鍵值對，它的設計目的是提供大規(guī)模、易用的存儲功能，并且程序員可以通過調用標準的接口，簡單地訪問存儲的數(shù)據(jù)。目前，許多新版本的瀏覽器都支持 DOM Storage 功能。當老版本的瀏覽器不支持 HTML5 提供的 DOM Storage 機制時，可以考慮用 Dojo 來實現(xiàn)相同的功能。

下載示例代碼

原文：http://www.ibm.com/developerworks/cn/web/1107_gaoly_html5storage/index.html

【編輯推薦】

  1. 我們離HTML 5還有多遠？
  2. 全新改進的HTML 5表單創(chuàng)建
  3.  HTML 5華麗麗的新特性
  4. HTML 5在應用程序開發(fā)方面沒有捷徑
  5. 五理由 .NET開發(fā)者應該關注HTML 5
責任編輯：陳貽新 來源： developerWorks
HTML 5
相關推薦

2018-05-30 08:54:00

離線存儲HTML5

2012-09-04 09:23:45

HTML5消息傳輸傳輸機制

2009-07-16 09:46:20

iBATIS Log機

2010-09-28 11:11:23

XML DOMHTML DOM

2010-09-28 10:24:50

HTML DOMXML DOM

2010-09-09 17:19:07

HTML DOMXML DOM

2012-04-26 08:29:22

DOM

2020-09-30 06:47:22

Kotlin機制

2011-09-02 17:04:13

Sencha ToucHTML5圖表庫

2010-09-26 08:46:06

HTML 5Cache Manif

2010-09-28 11:22:18

Html DOM樹

2013-01-04 11:38:35

2010-09-28 10:40:32

HTML DOM

2019-08-15 10:17:16

Webpack運行瀏覽器

2011-03-10 15:22:08

訪問控制機制Java

2023-12-11 07:21:12

SPI機制插件

2009-06-18 12:21:07

javascriptdom

2009-07-09 10:15:23

PHP DOM

2010-08-23 13:29:43

HTMLpadding

2010-09-28 16:22:17

DOM樹
點贊
收藏

51CTO技術棧公眾號