23.3.3 Web存儲機制【JavaScript高級程序設計第三版】

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/。

 

下載離線版教程：http://www.shouce.ren/api/view/a/15218