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

例項解析:

  • 使用 key="sitename" 和 value="https://www.itread01.com/html/入門教學" 建立一個 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) 將會報錯。

輸出結果演示: