HTML5中web是什嗎？web儲存中的元素有哪些？

HTML5 web 儲存,一個比cookie更好的本機存放區方式。本文介紹了HTML5 web儲存的含義和元素解析。

什麼是 HTML5 Web 儲存?

使用HTML5可以在本機存放區使用者的瀏覽資料。

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

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

用戶端儲存資料的兩個對象為：

localStorage - 用於長久儲存整個網站的資料，儲存的資料沒有到期時間，直到手動去除。

sessionStorage - 用於臨時儲存同一視窗(或標籤頁)的資料，在關閉視窗或標籤頁之後將會刪除這些資料。

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

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

localStorage Object Storage Service的資料沒有時間限制。第二天、第二周或下一年之後，資料依然可用。

localStorage.sitename="topic.alibabacloud.com教程";document.getElementById("result").innerHTML="網站名：" + localStorage.sitename;

執行個體解析：

使用 key="sitename" 和 value="菜鳥教程" 建立一個 localStorage 鍵/值對。

檢索索引值為"sitename" 的值然後將資料插入 id="result"的元素中。

以上執行個體也可以這麼寫：

// 儲存localStorage.sitename = "topic.alibabacloud.com教程";// 尋找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 + " 次 ";