JS頁面刷新保持數據不丟失

 

1. 下面是 DOM Storage 的接口定義：
2.  
    
3.  
   interface Storage {
4.  
   readonly attribute unsigned long length;
5.  
   getter DOMString key(in unsigned long index);
6.  
   getter any getItem(in DOMString key);
7.  
   setter creator void setItem(in DOMString key, in any data);
8.  
   deleter void removeItem(in DOMString key);
9.  
   void clear();
10.  
    };

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

 

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

DOM Storage

示例應用程序：用戶注冊

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

DOM Storage 兩個分類

DOM Storage 分為 sessionStorage 和 localStorage。

localStorage 對象和 sessionStorage 對象使用方法基本相同，它們的區別在於作用的范圍不同。sessionStorage 用來存儲與頁面相關的數據，它在頁面關閉后無法使用。而 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 對象中的鍵值對數量。

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 以上，Firefox 3.5 以上，Chrome 4.0 以上都是支持 DOM Storage 的。

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

清單 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 來實現相同功能
8.  
   }
9.  
    
10.  
    //localStorage
11.  
    if(window.localStorage){
12.  
    alert(“support localStorage”);
13.  
    } else{
14.  
    alert(“not support localStorage”);
15.  
    // 不支持 localStorage
16.  
    // 用 dojox.storage 來實現相同功能
17.  
    }

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

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

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

清單 2. 第一個表單頁面

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

 

 

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

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

清單 3. 第二個表單頁面

1.  
   <script type="text/javascript">
2.  
   // 將保持在 sessionStorage 中的數據賦給表單的隱藏屬性
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 實現相同功能
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" οnclick="backToPreviousForm()">
27.  
    <input type="submit" value="Submit" οnclick="addStorageValue()"></input>
28.  
    </form>

使用 DOM Storage 需要注意的幾點

保存在 Storage 對象的數據類型

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

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

本文用到兩個相關的函數

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

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

在清單 4 中，先把一個布爾型的數據存到 Storage 對象中，然后再取出，可以看到布爾類型的數據在取出的時候變為字符串。接下來換一種方式保存數據，先用 JSON.stringify 方法序列化數據，然后保存到 Storage 對象中，在取出的時候用 JSON.parse 方法進行反序列化，可以看到讀取出的數據還是布爾類型。

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

string1 boolean2 string3

 

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

 

 

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

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

點擊查看大圖

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

清單 5. 使用 JSON 對 DOM Storage 的復雜數據進行處理

 

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.addEventListener(“unload”, saveValue. true);
12.  
    </script>

 

空間大小

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

圖 2. Chrome 瀏覽器拋出異常

點擊查看大圖

安全性

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

存儲事件驅動

如果想在存儲成功或修改存儲的值時執行一些操作，可以用 DOM Storage 接口提供的事件。可以使用如下方法注冊事件：

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：發生改變的鍵。

oldValue：鍵改變之前的值。

newValue：鍵改變之后的值。

url：觸發存儲事件的頁面 url。

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

清單 6. 添加存儲事件

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

使用 Dojo 實現之前用戶注冊的功能

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

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

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

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

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

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

現在對第一個表單的 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.  
    // 保存數據
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 中的數據賦給表單的隱藏屬性
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>