HTML5 Web存儲，一個比cookie更好用的方法

什么是 HTML5 Web 存儲?

使用HTML5可以在本地存儲用戶的瀏覽數(shù)據(jù)。

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

數(shù)據(jù)以 鍵/值 對存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用。

瀏覽器支持

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

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

localStorage和sessionStorage

客戶端存儲數(shù)據(jù)的兩個對象為：

localStorage - 沒有時間限制的數(shù)據(jù)存儲

sessionStorage - 針對一個session的數(shù)據(jù)存儲

在使用web存儲前，應(yīng)檢查瀏覽器是否支持localStorage和sessionStorage

if(typeof(Storage) !== "undefined"){ //支持的代碼?} else { //sorry，不支持?};

localStorage 對象

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

實例：

localStorage.sitename="菜鳥教程";

document.getElementById("result").innerHTML="網(wǎng)站名："+localStorage.sitename;

實例解析：

使用 key="sitename" 和 value="菜鳥教程" 創(chuàng)建一個 localStorage 鍵/值對。

檢索鍵值為"sitename" 的值然后將數(shù)據(jù)插入 id="result"的元素中。

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

1、保存數(shù)據(jù) ： localStorage.setItem(key,value);

2、讀取數(shù)據(jù) ： localStorage.getItem(key);

3、刪除單個數(shù)據(jù) ： localStorage.removeItem(key);

4、刪除所有數(shù)據(jù) ：localStorage.clear();

5、得到某個索引的key ： localStorage.key(index);

sessionStorage對象

sessionStorage方法針對一個session進行數(shù)據(jù)存儲。當用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會被刪除。

webstorage和cookie的區(qū)別

WebStorage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設(shè)計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。

除此之外，WebStorage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進行交互，作為HTTP規(guī)范的一部分而存在，而WebStorage僅僅是為了在本地“存儲”數(shù)據(jù)而生。