Web Storage 最早是在Web 超文本應用技術工作組（WHAT-WG）的Web 應用1.0 規範中描述的。 這個規範的最初的工作最終成為了HTML5 的一部分。Web Storage 的目的是剋服由cookie 帶來的一些限制，當數據需要被嚴格控制在客戶端上時，無須持續地將數據發回伺服器。W ...
Web Storage 最早是在Web 超文本應用技術工作組（WHAT-WG）的Web 應用1.0 規範中描述的。
這個規範的最初的工作最終成為了HTML5 的一部分。Web Storage 的目的是剋服由cookie 帶來的一些限制，當數據需要被嚴格控制在客戶端上時，無須持續地將數據發回伺服器。Web Storage 的兩個主要目標是：
- 提供一種在cookie 之外存儲會話數據的途徑；
- 提供一種存儲大量可以跨會話存在的數據的機制。
最初的Web Storage 規範包含了兩種對象的定義：sessionStorage 和globalStorage。這兩個對象在支持的瀏覽器中都是以windows 對象屬性的形式存在的，支持這兩個屬性的瀏覽器包括IE8+、Firefox 3.5+、Chrome 4+和Opera 10.5+。
Firefox 2 和3 基於早期規範的內容部分實現了Web Storage，當時只實現了globalStorage，沒有實現localStorage。
1. Storage 類型
Storage 類型提供最大的存儲空間（因瀏覽器而異）來存儲名值對兒。Storage 的實例與其他對象類似，有如下方法。
- clear()： 刪除所有值；Firefox 中沒有實現 。
- getItem(name)：根據指定的名字name 獲取對應的值。
- key(index)：獲得index 位置處的值的名字。
- removeItem(name)：刪除由name 指定的名值對兒。
- setItem(name, value)：為指定的name 設置一個對應的值。
其中，getItem()、removeItem()和setItem()方法可以直接調用，也可通過Storage 對象間接調用。因為每個項目都是作為屬性存儲在該對象上的，所以可以通過點語法或者方括弧語法訪問屬性來讀取值，設置也一樣，或者通過delete 操作符進行刪除。不過，我們還建議讀者使用方法而不是屬性來訪問數據，以免某個鍵會意外重寫該對象上已經存在的成員。
還可以使用length 屬性來判斷有多少名值對兒存放在Storage 對象中。但無法判斷對象中所有數據的大小，不過IE8 提供了一個remainingSpace 屬性，用於獲取還可以使用的存儲空間的位元組數。Storage 類型只能存儲字元串。非字元串的數據在存儲之前會被轉換成字元串。
2. sessionStorage 對象
sessionStorage 對象存儲特定於某個會話的數據，也就是該數據只保持到瀏覽器關閉。這個對象就像會話cookie，也會在瀏覽器關閉後消失。存儲在sessionStorage 中的數據可以跨越頁面刷新而存在，同時如果瀏覽器支持，瀏覽器崩潰並重啟之後依然可用（Firefox 和WebKit 都支持，IE 則不行）。
因為seesionStorage 對象綁定於某個伺服器會話，所以當文件在本地運行的時候是不可用的。存儲在sessionStorage 中的數據只能由最初給對象存儲數據的頁面訪問到，所以對多頁面應用有限制。由於sessionStorage 對象其實是Storage 的一個實例，所以可以使用setItem()或者直接設置新的屬性來存儲數據。下麵是這兩種方法的例子。
//使用方法存儲數據
sessionStorage.setItem("name", "Nicholas");
//使用屬性存儲數據
sessionStorage.book = "Professional JavaScript";
不同瀏覽器寫入數據方面略有不同。Firefox 和WebKit 實現了同步寫入，所以添加到存儲空間中的數據是立刻被提交的。而IE 的實現則是非同步寫入數據，所以在設置數據和將數據實際寫入磁碟之間可能有一些延遲。對於少量數據而言，這個差異是可以忽略的。對於大量數據，你會發現IE 要比其他瀏覽器更快地恢復執行，因為它會跳過實際的磁碟寫入過程。
在IE8 中可以強制把數據寫入磁碟：在設置新數據之前使用begin()方法，並且在所有設置完成之後調用commit()方法。看以下例子。
//只適用於IE8 sessionStorage.begin(); sessionStorage.name = "Nicholas"; sessionStorage.book = "Professional JavaScript"; sessionStorage.commit();
這段代碼確保了name 和book 的值在調用commit()之後立刻被寫入磁碟。調用begin()是為了確保在這段代碼執行的時候不會發生其他磁碟寫入操作。對於少量數據而言，這個過程不是必需的；不過，對於大量數據（如文檔之類的）可能就要考慮這種事務形式的方法了。sessionStorage 中有數據時，可以使用getItem()或者通過直接訪問屬性名來獲取數據。兩種方法的例子如下。
//使用方法讀取數據
var name = sessionStorage.getItem("name");
//使用屬性讀取數據
var book = sessionStorage.book;
還可以通過結合length 屬性和key()方法來迭代sessionStorage 中的值，如下所示。
for (var i = 0,
len = sessionStorage.length; i < len; i++) {
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
alert(key + "=" + value);
}
它是這樣遍歷sessionStorage 中的名值對兒的：首先通過key()方法獲取指定位置上的名字，然後再通過getItem()找出對應該名字的值。還可以使用for-in 迴圈來迭代sessionStorage 中的值：
for (var key in sessionStorage) {
var value = sessionStorage.getItem(key);
alert(key + "=" + value);
}
每次經過迴圈的時候，key 被設置為sessionStorage 中下一個名字，此時不會返回任何內置方法或length 屬性。要從sessionStorage 中刪除數據，可以使用delete 操作符刪除對象屬性，也可調用removeItem()方法。以下是這些方法的例子。
//使用delete 刪除一個值——在WebKit 中無效
delete sessionStorage.name;
//使用方法刪除一個值
sessionStorage.removeItem("book");
運行一下
在撰寫本書時，delete 操作符在WebKit 中無法刪除數據，removeItem()則可以在各種支持的瀏覽器中正確運行。sessionStorage 對象應該主要用於僅針對會話的小段數據的存儲。如果需要跨越會話存儲數據，那麼globalStorage 或者localStorage 更為合適。
3. globalStorage 對象
Firefox 2 中實現了globalStorage 對象。作為最初的Web Storage 規範的一部分，這個對象的目的是跨越會話存儲數據，但有特定的訪問限制。要使用globalStorage，首先要指定哪些域可以訪問該數據。可以通過方括弧標記使用屬性來實現，如以下例子所示。
//保存數據 globalStorage["wrox.com"].name = "Nicholas"; //獲取數據 var name = globalStorage["wrox.com"].name;
在這裡，訪問的是針對功能變數名稱wrox.com 的存儲空間。globalStorage 對象不是Storage 的實例，而具體的globalStorage["wrox.com"]才是。這個存儲空間對於wrox.com 及其所有子域都是可以訪問的。可以像下麵這樣指定子功能變數名稱。
//保存數據 globalStorage["www.wrox.com"].name = "Nicholas"; //獲取數據 var name = globalStorage["www.wrox.com"].name;
這裡所指定的存儲空間只能由來自www.wrox.com 的頁面訪問，其他子功能變數名稱都不行。
某些瀏覽器允許更加寬泛的訪問限制，比如只根據頂級功能變數名稱進行限制或者允許全局訪問，如下麵例子所示。
//存儲數據，任何人都可以訪問——不要這樣做！ globalStorage[""].name = "Nicholas"; //存儲數據，可以讓任何以.net 結尾的功能變數名稱訪問——不要這樣做！ globalStorage["net"].name = "Nicholas";
雖然這些也支持，但是還是要避免使用這種可寬泛訪問的數據存儲，以防止出現潛在的安全問題。
考慮到安全問題，這些功能在未來可能會被刪除或者是被更嚴格地限制，所以不應依賴於這類功能。當使用globalStorage 的時候一定要指定一個功能變數名稱。
對globalStorage 空間的訪問，是依據發起請求的頁面的功能變數名稱、協議和埠來限制的。例如，如果使用HTTPS 協議在wrox.com 中存儲了數據，那麼通過HTTP 訪問的wrox.com 的頁面就不能訪問該數據。同樣，通過80 埠訪問的頁面則無法與同一個域同樣協議但通過8080 埠訪問的頁面共用數據。這類似於Ajax 請求的同源策略。globalStorage 的每個屬性都是Storage 的實例。因此，可以像如下代碼中這樣使用。
globalStorage["www.wrox.com"].name = "Nicholas";
globalStorage["www.wrox.com"].book = "Professional JavaScript";
globalStorage["www.wrox.com"].removeItem("name");
var book = globalStorage["www.wrox.com"].getItem("book");
如果你事先不能確定功能變數名稱，那麼使用location.host 作為屬性名比較安全。例如：
globalStorage[location.host].name = "Nicholas";
var book = globalStorage[location.host].getItem("book");
運行一下
如果不使用removeItem() 或者delete 刪除， 或者用戶未清除瀏覽器緩存， 存儲在globalStorage 屬性中的數據會一直保留在磁碟上。這讓globalStorage 非常適合在客戶端存儲文檔或者長期保存用戶偏好設置。
4. localStorage 對象
localStorage 對象在修訂過的HTML 5 規範中作為持久保存客戶端數據的方案取代了globalStorage。與globalStorage 不同，不能給localStorage 指定任何訪問規則；規則事先就設定好了。要訪問同一個localStorage 對象，頁面必須來自同一個功能變數名稱（子功能變數名稱無效），使用同一種協議，在同一個埠上。這相當於globalStorage[location.host]。
由於localStorage 是Storage 的實例，所以可以像使用sessionStorage 一樣來使用它。下麵是一些例子。
//使用方法存儲數據
localStorage.setItem("name", "Nicholas");
//使用屬性存儲數據
localStorage.book = "Professional JavaScript";
//使用方法讀取數據
var name = localStorage.getItem("name");
//使用屬性讀取數據
var book = localStorage.book;
運行一下
存儲在localStorage 中的數據和存儲在globalStorage 中的數據一樣，都遵循相同的規則：數據保留到通過JavaScript 刪除或者是用戶清除瀏覽器緩存。為了相容只支持globalStorage 的瀏覽器，可以使用以下函數。
function getLocalStorage() {
if (typeof localStorage == "object") {
return localStorage;
} else if (typeof globalStorage == "object") {
return globalStorage[location.host];
} else {
throw new Error("Local storage not available.");
}
}
然後，像下麵這樣調用一次這個函數，就可以正常地讀寫數據了。
var storage = getLocalStorage();
運行一下
在確定了使用哪個Storage 對象之後，就能在所有支持Web Storage 的瀏覽器中使用相同的存取規則操作數據了。
5. storage 事件
對Storage 對象進行任何修改，都會在文檔上觸發storage 事件。當通過屬性或setItem()方法保存數據，使用delete 操作符或removeItem()刪除數據，或者調用clear()方法時，都會發生該事件。這個事件的event 對象有以下屬性。
- domain：發生變化的存儲空間的功能變數名稱。
- key：設置或者刪除的鍵名。
- newValue：如果是設置值，則是新值；如果是刪除鍵，則是null。
- oldValue：鍵被更改之前的值。
在這四個屬性中，IE8 和Firefox 只實現了domain 屬性。在撰寫本書的時候，WebKit 尚不支持storage 事件：以下代碼展示瞭如何偵聽storage 事件：
EventUtil.addHandler(document, "storage", function(event){
alert("Storage changed for " + event.domain);
});
運行一下
無論對sessionStorage、globalStorage 還是localStorage 進行操作，都會觸發storage事件，但不作區分。
6. 限制
與其他客戶端數據存儲方案類似，Web Storage 同樣也有限制。這些限制因瀏覽器而異。一般來說，對存儲空間大小的限制都是以每個來源（協議、域和埠）為單位的。換句話說，每個來源都有固定大小的空間用於保存自己的數據。考慮到這個限制，就要註意分析和控制每個來源中有多少頁面需要保存數據。
對於localStorage 而言，大多數桌面瀏覽器會設置每個來源5MB 的限制。Chrome 和Safari 對每個來源的限制是2.5MB。而iOS 版Safari 和Android 版WebKit 的限制也是2.5MB。
對sessionStorage 的限制也是因瀏覽器而異。有的瀏覽器對sessionStorage 的大小沒有限制，但Chrome、Safari、iOS 版Safari 和Android 版WebKit 都有限制，也都是2.5MB。IE8+和Opera 對sessionStorage 的限制是5MB。
有關Web Storage 的限制，請參考http://dev-test.nemikor.com/web-storage/support-test/。
