top
Loading...
HTML5 Web 存儲

HTML5 Web 存儲


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


什么是 HTML5 Web 存儲?

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

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

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


瀏覽器支持

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="教程"; document.getElementById("result").innerHTML="網站名:" + localStorage.sitename;

嘗試一下 »

實例解析:

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

以上實例也可以這么寫:

// 存儲 localStorage.sitename = "教程"; // 查找 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) 將會報錯。

輸出結果演示:

北斗有巢氏 有巢氏北斗