摘要：的目的就是取代進(jìn)行大量的本地?cái)?shù)據(jù)存儲(chǔ)，其中不能進(jìn)行跨會(huì)話存儲(chǔ)，這可以使用彌補(bǔ)。刪除由指定的名值對(duì)兒。使用方法存儲(chǔ)數(shù)據(jù)使用屬性存儲(chǔ)數(shù)據(jù)使用方法讀取數(shù)據(jù)使用屬性讀取數(shù)據(jù)一般來(lái)說(shuō)，對(duì)存儲(chǔ)空間大小的限制都是以每個(gè)源協(xié)議域和端口為單位的。

本文首先介紹web storage和Cookie的對(duì)比，解釋web storage的優(yōu)勢(shì)；隨后指出怎樣使用插firebug插件的擴(kuò)展firestorage-plus查看web storage；然后介紹storage的方法和屬性，sessionStorage和localStorage的方法和屬性繼承自storage；最后介紹sessionStorage和localStorage。

cookie不適合大量數(shù)據(jù)的存儲(chǔ)（Cookie的大小是受限的），因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來(lái)傳遞（每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候cooki都會(huì)被發(fā)送過(guò)去），這使得cookie 速度很慢而且效率也不高。web storage的目的就是取代Cookie進(jìn)行大量的本地?cái)?shù)據(jù)存儲(chǔ)，其中sessionStorage不能進(jìn)行跨會(huì)話存儲(chǔ)，這可以使用localStorage彌補(bǔ)。

一款針對(duì)firebug插件的擴(kuò)展：firestorage-plus：
https://addons.mozilla.org/en...
一篇相關(guān)的介紹：
http://www.softwareishard.com...

firestorage-plus的簡(jiǎn)單測(cè)試：

essionStorage.setItem("name", "Nicholas");
console.log(sessionStorage.name);

在firebug的DOM菜單找到localStorage和sessionStorage選項(xiàng)，可以查看web storage，這樣查看給出的信息有限。

也可以通過(guò)firestorage-plus進(jìn)行查看：

選中某一個(gè)storage并右鍵，甚至可以對(duì)其進(jìn)行編輯，可見(jiàn)這個(gè)插件確實(shí)比較簡(jiǎn)單好用。

關(guān)于web storage，只需要了解兩個(gè)對(duì)象：localStorage和sessionStorage，它們都是storage的實(shí)例，因此會(huì)繼承storage的方法和屬性，包括：

clear()： 刪除所有值； Firefox 中沒(méi)有實(shí)現(xiàn) 。
getItem(name)：根據(jù)指定的名字 name 獲取對(duì)應(yīng)的值。 
key(index)：獲得 index 位置處的值的名字。
removeItem(name)：刪除由 name 指定的名值對(duì)兒。
setItem(name, value)：為指定的 name 設(shè)置一個(gè)對(duì)應(yīng)的值。
length 屬性：判斷有多少名值對(duì)兒存放在 Storage 對(duì)象中。

需要注意，web存儲(chǔ)的數(shù)據(jù)類型都是字符串，如果需要其他類型，需要自行轉(zhuǎn)換。

sessionStorage 對(duì)象存儲(chǔ)特定于某個(gè)會(huì)話的數(shù)據(jù)，也就是該數(shù)據(jù)只保持到瀏覽器關(guān)閉。這個(gè)對(duì)象就像會(huì)話 cookie，也會(huì)在瀏覽器關(guān)閉后消失。存儲(chǔ)在 sessionStorage 中的數(shù)據(jù)可以跨越頁(yè)面刷新而存在，同時(shí)如果瀏覽器支持，瀏覽器崩潰并重啟之后依然可用（Firefox 和 WebKit 都支持， IE 則不行）。存儲(chǔ)在 sessionStorage 中的數(shù)據(jù)只能由最初給對(duì)象存儲(chǔ)數(shù)據(jù)的頁(yè)面訪問(wèn)到，所以對(duì)多頁(yè)面應(yīng)用有限制。
根據(jù)sessionStorage繼承自storage的方法和屬性，可以有如下操作：

//使用方法存儲(chǔ)數(shù)據(jù)
sessionStorage.setItem("name", "Nicholas");
//使用屬性存儲(chǔ)數(shù)據(jù)
sessionStorage.book = "Professional JavaScript";

sessionStorage 中有數(shù)據(jù)時(shí)，可以使用 getItem()或者通過(guò)直接訪問(wèn)屬性名來(lái)獲取數(shù)據(jù)。

//使用方法讀取數(shù)據(jù)
var name = sessionStorage.getItem("name");
//使用屬性讀取數(shù)據(jù)
var book = sessionStorage.book;

還可以通過(guò)結(jié)合 length 屬性和 key()方法來(lái)迭代 sessionStorage 中的值，如下所示。

sessionStorage.setItem("name", "Nicholas");
sessionStorage.setItem("age", "20");
sessionStorage.setItem("height", "180cm");
for (var i = 0, len = sessionStorage.length; i < len; i++) {
  var key = sessionStorage.key(i);
  var value = sessionStorage.getItem(key);
  console.log(key + "=" + value);
}

還可以使用 for-in 循環(huán)來(lái)迭代 sessionStorage 中的值：

for (var key in sessionStorage){
var value = sessionStorage.getItem(key);
alert(key + "=" + value);
}

要從 sessionStorage 中刪除數(shù)據(jù)，可以使用 delete 操作符刪除對(duì)象屬性，也可調(diào)用
removeItem()方法。

//設(shè)置四個(gè)值
sessionStorage.setItem("name", "Nicholas");
sessionStorage.setItem("age", "20");
sessionStorage.setItem("height", "180cm");
sessionStorage.setItem("book", "ring of the king");
//使用 delete 刪除一個(gè)值——在 WebKit 中無(wú)效
delete sessionStorage.name;
//使用方法刪除一個(gè)值
sessionStorage.removeItem("book");

在firebug中可以看到只剩兩個(gè)值：

localStorage 中的數(shù)據(jù)保留到通過(guò) JavaScript 刪除或者是用戶清除瀏覽器緩存。要訪問(wèn)同一個(gè) localStorage 對(duì)象，頁(yè)面必須來(lái)自同一個(gè)域名（子域名無(wú)效），使用同一種協(xié)議，在同一個(gè)端口上，這類似于Ajax的同源策略。
由于 localStorage 是 Storage 的實(shí)例，所以可以像使用 sessionStorage 一樣來(lái)使用它。下面是一些例子。

//使用方法存儲(chǔ)數(shù)據(jù)
localStorage.setItem("name", "Nicholas");
//使用屬性存儲(chǔ)數(shù)據(jù)
localStorage.book = "Professional JavaScript";

//使用方法讀取數(shù)據(jù)
var name = localStorage.getItem("name");
//使用屬性讀取數(shù)據(jù)
var book = localStorage.book;

一般來(lái)說(shuō)，對(duì)存儲(chǔ)空間大小的限制都是以每個(gè)源（協(xié)議、域和端口）為單位的。換句話說(shuō)，每個(gè)源都有固定大小的空間用于保存自己的數(shù)據(jù)。考慮到這個(gè)限制，就要注意分析和控制每個(gè)源中有多少頁(yè)面需要保存數(shù)據(jù)。
對(duì)于 localStorage 而言，大多數(shù)桌面瀏覽器會(huì)設(shè)置每個(gè)來(lái)源 5MB 的限制。 Chrome 和 Safari 對(duì)每個(gè)來(lái)源的限制是 2.5MB。而 iOS 版 Safari 和 Android 版 WebKit 的限制也是 2.5MB。
對(duì) sessionStorage 的限制也是因?yàn)g覽器而異。有的瀏覽器對(duì) sessionStorage 的大小沒(méi)有限制，但 Chrome、 Safari、 iOS 版 Safari 和 Android 版 WebKit 都有限制，也都是 2.5MB。 IE8+和 Opera 對(duì)sessionStorage 的限制是 5MB。