js Web Storage

HTML5 提供了兩種在客戶端存儲數據的新方法（Web Storage）：

• localStorage - 沒有時間限制的數據存儲

• sessionStorage - 針對一個 session 的數據存儲

以前，這些都是由 cookie 完成的。可是 cookie 不適合大量數據的存儲，由於它們由每一個對服務器的請求來傳遞，這使得 cookie 速度很慢並且效率也不高。

在 HTML5 中，數據不是由每一個服務器請求傳遞的，而是隻有在請求時使用數據。它使在不影響網站性能的狀況下存儲大量數據成爲可能。

對於不一樣的網站，數據存儲於不一樣的區域，而且一個網站只能訪問其自身的數據。

HTML5 使用 JavaScript 來存儲和訪問數據。

每一個瀏覽器對session storage和local storage支持的數據儲存大小都不同，具體能夠到[[測試頁面]](http://dev-test.nemikor.com/w...

瀏覽器兼容

儲存方式	chrome	firefox	IE	Opera	Safari
localStorage	4	3.5	8	10.50	4
sessionStorage	5	2	8	10.50	4

session storage

存儲在 sessionStorage 裏面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，而且從新加載或恢復頁面仍會保持原來的頁面會話。在新標籤或窗口打開一個頁面會初始化一個新的會話，這點和 session,cookies 的運行方式不一樣。

語法

// 設置session Storage
sessionStorage.setItem('key', 'value');
sessionStorage.keyName = 'valueName';   // 也能夠使用這種方式

// 讀取數據
console.log(sessionStorage.getItem('key'));

// 刪除數據
sessionStorage.removeItem('value');

// 清空session storage中全部的數據
sessionStorage.clear();

local storage

localStorage 方法存儲的數據沒有時間限制。次日、第二週或下一年以後，數據依然可用。

語法

// 設置local Storage
localStorage.setItem('key', 'value');
localStorage.keyName = 'valueName'; // 也能夠使用這種方式

// 讀取數據
console.log(localStorage.getItem('key'));

// 刪除數據
localStorage.removeItem('key');

// 清空local storage中全部的數據
localStorage.clear();