HTML5 Web 存儲

HTML5 web 存儲,一個比cookie更好的本地存儲方式。

什麼是 HTML5 Web 存儲?

使用HTML5可以在本地存儲用戶的流覽數據。

早些時候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速. 這些數據不會被保存在伺服器上，但是這些數據只用於用戶請求網站數據上.它也可以存儲大量的數據，而不影響網站的性能.

數據以 鍵/值 對存在, web網頁的數據只允許該網頁訪問使用。

流覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲。

注意: Internet Explorer 7 及更早IE版本不支持web 存儲.

localStorage 和 sessionStorage 

客戶端存儲數據的兩個對象為：

  • localStorage - 用於長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。
  • sessionStorage - 用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁之後將會刪除這些數據。

在使用 web 存儲前,應檢查流覽器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 對象! // 一些代碼..... } else { // 抱歉! 不支持 web 存儲。 }

localStorage 對象

localStorage 對象存儲的數據沒有時間限制。第二天、第二周或下一年之後，數據依然可用。

實例

localStorage.sitename="IT研修"; document.getElementById("result").innerHTML="網站名：" + localStorage.sitename;

實例解析：

  • 使用 key="sitename" 和 value="IT研修" 創建一個 localStorage 鍵/值對。
  • 檢索鍵值為"sitename" 的值然後將數據插入 id="result"的元素中。

以上實例也可以這麼寫：

// 存儲 localStorage.sitename = "IT研修"; // 查找 document.getElementById("result").innerHTML = localStorage.sitename;

移除 localStorage 中的 "sitename" :

localStorage.removeItem("sitename");

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：

  • 保存數據：localStorage.setItem(key,value);
  • 讀取數據：localStorage.getItem(key);
  • 刪除單個數據：localStorage.removeItem(key);
  • 刪除所有數據：localStorage.clear();
  • 得到某個索引的key：localStorage.key(index);

提示: 鍵/值對通常以字串存儲，你可以按自己的需要轉換該格式。

下麵的實例展示了用戶點擊按鈕的次數。

代碼中的字串值轉換為數字類型:

實例

if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; } else { localStorage.clickcount=1; } document.getElementById("result").innerHTML=" 你已經點擊了按鈕 " + localStorage.clickcount + " 次 ";


sessionStorage 對象

sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉流覽器窗口後，數據會被刪除。

如何創建並訪問一個 sessionStorage：

實例

if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="在這個會話中你已經點擊了該按鈕 " + sessionStorage.clickcount + " 次 ";

Web Storage 開發一個簡單的網站列表程式

網站列表程式實現以下功能：

  • 可以輸入網站名，網址，以網站名作為key存入localStorage；
  • 根據網站名，查找網址；
  • 列出當前已保存的所有網站；

以下代碼用於保存於查找數據：

save() 與 find() 方法

//保存數據 function save(){ var siteurl = document.getElementById("siteurl").value; var sitename = document.getElementById("sitename").value; localStorage.setItem(sitename, siteurl); alert("添加成功"); } //查找數據 function find(){ var search_site = document.getElementById("search_site").value; var sitename = localStorage.getItem(search_site); var find_result = document.getElementById("find_result"); find_result.innerHTML = search_site + "的網址是：" + sitename; }

完整實例演示如下：

實例

<div style="border: 2px dashed #ccc;width:320px;text-align:center;"> <label for="sitename">網站名(key)：</label> <input type="text" id="sitename" name="sitename" class="text"/> <br/> <label for="siteurl">網 址(value)：</label> <input type="text" id="siteurl" name="siteurl"/> <br/> <input type="button" onclick="save()" value="新增記錄"/> <hr/> <label for="search_site">輸入網站名：</label> <input type="text" id="search_site" name="search_site"/> <input type="button" onclick="find()" value="查找網站"/> <p id="find_result"><br/></p> </div>

實現效果截圖：

以上實例只是演示了簡單的 localStorage 存儲與查找，更多情況下我們存儲的數據會更複雜。

接下來我們將使用 JSON.stringify 來存儲對象數據，JSON.stringify 可以將對象轉換為字串。

var site = new Object; ... var str = JSON.stringify(site); // 將對象轉換為字串

之後我們使用 JSON.parse 方法將字串轉換為 JSON 對象：

var site = JSON.parse(str);

JavaScript 實現代碼：

save() 與 find() 方法

//保存數據 function save(){ var site = new Object; site.keyname = document.getElementById("keyname").value; site.sitename = document.getElementById("sitename").value; site.siteurl = document.getElementById("siteurl").value; var str = JSON.stringify(site); // 將對象轉換為字串 localStorage.setItem(site.keyname,str); alert("保存成功"); } //查找數據 function find(){ var search_site = document.getElementById("search_site").value; var str = localStorage.getItem(search_site); var find_result = document.getElementById("find_result"); var site = JSON.parse(str); find_result.innerHTML = search_site + "的網站名是：" + site.sitename + "，網址是：" + site.siteurl; }

完整實例如下：

實例

<div style="border: 2px dashed #ccc;width:320px;text-align:center;"> <label for="keyname">別名(key):</label> <input type="text" id="keyname" name="keyname" class="text"/> <br/> <label for="sitename">網站名：</label> <input type="text" id="sitename" name="sitename" class="text"/> <br/> <label for="siteurl">網 址：</label> <input type="text" id="siteurl" name="siteurl"/> <br/> <input type="button" onclick="save()" value="新增記錄"/> <hr/> <label for="search_site">輸入別名(key)：</label> <input type="text" id="search_site" name="search_site"/> <input type="button" onclick="find()" value="查找網站"/> <p id="find_result"><br/></p> </div>

實例中的 loadAll 輸出了所有存儲的數據，你需要確保 localStorage 存儲的數據都為 JSON 格式，否則 JSON.parse(str) 將會報錯。

輸出結果演示：