一、HTML5 Web 儲存

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

使用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為例）：

常用API：

• 儲存資料：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 開發一個簡單的網站列表程式

1、演示了簡單的 localStorage 儲存與查詢

//儲存資料  

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;  

}

2、儲存複雜資料

我們將使用 [JSON.stringify](https://www.runoob.com/js/javascript-json-
stringify.html) 來儲存物件資料，[JSON.stringify](https://www.runoob.com/js/javascript-
json-stringify.html) 可以將物件轉換為字串。

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

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

var site = JSON.parse(str);

//儲存資料  
function save(){  
    var site = {};

    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;  

}