HTML5的Web Storage API，我們也稱為DOMStarage API，用于在Web請求之間持久化數(shù)據(jù)。在Web Starage API 出現(xiàn)之前，我們都是將客戶端和服務(wù)端之間的交互數(shù)據(jù)存儲在遠程服務(wù)器上，隨著Web Starage API的出現(xiàn)，我們可以在客戶端存儲我們重復(fù)訪問的交互數(shù)據(jù)，用戶在打開瀏覽器的時候，可以快速地讀取到數(shù)據(jù)，減少了用戶等待，數(shù)據(jù)流量。
在Web Starage 出現(xiàn)之前，我們在客戶端存儲數(shù)據(jù)一般使用Cookie，用于客戶端和服務(wù)端之間保存會話標(biāo)識符，同時可以將本地個性化數(shù)據(jù)保存在應(yīng)用程序中。Cookie的受限在它的存儲大小只有4KB，不可能存儲大數(shù)據(jù)；cookie在請求情況下透明地在服務(wù)器和瀏覽器中傳送數(shù)據(jù)，在沒加密的情況下數(shù)據(jù)存在安全風(fēng)險。
相比之下，Web Starage API 用Jsvascript來保存對象，在頁面中加載，讀取和保存數(shù)據(jù)都比較簡易，存儲的數(shù)據(jù)不在網(wǎng)絡(luò)上傳輸，而且可以保存高達幾兆字節(jié)的數(shù)據(jù)。無疑是我們客戶端數(shù)據(jù)臨時存儲的利器。
瀏覽器支持情況
瀏覽器類型
版本號
Chrome
3.0版本及以上
FireFox
3.0版本及以上
Internet Explorer
8.0版本及以上
Ppera
10.5版本及以上
Safari
4.0版本及以上
使用 sessionStorage 操作數(shù)據(jù)：
設(shè)置數(shù)據(jù)：
window.sessionStorage.setItem(“UserName”,”Ben”); 或者
window.sessionStorage.UserName = “Ben”;
獲取數(shù)據(jù)：
var UserName = window.sessionStorage.getItem(“UserName”); 或者
var UserName = window.sessionStorage.UserName;
刪除數(shù)據(jù)：
window.sessionStorage.removeItem(“UserName”);
清空數(shù)據(jù)：
window.sessionStorage.clear();
sessionStorage 的生命周期值存在于瀏覽器窗口或者頁面標(biāo)簽，一旦關(guān)閉瀏覽器或者頁面標(biāo)簽，數(shù)據(jù)也就丟失了，所以它更應(yīng)該被認為是頁面間的會話標(biāo)識。
數(shù)據(jù)隔離，不同的瀏覽器頁面或者標(biāo)簽來說，數(shù)據(jù)會跨頁面保存，但是不會泄漏。
使用 localStorage 設(shè)置或獲取數(shù)據(jù)：
設(shè)置數(shù)據(jù)：
window.localStorage.setItem(“UserName”,”Ben”); 或者
window.localStorage.UserName = “Ben”;
獲取數(shù)據(jù)：
var UserName = window.localStorage.getItem(“UserName”); 或者
var UserName = window.localStorage.UserName;
刪除數(shù)據(jù)：
window.localStorage.removeItem(“UserName”);
清空數(shù)據(jù)：
window.localStorage.clear();
sessionStorage 和 localStorage的比較：
sessionStorage
localStorage
數(shù)據(jù)保存直至存儲它的窗口或標(biāo)簽頁面關(guān)閉
數(shù)據(jù)的生命周期比窗口或瀏覽器的生命周期長
數(shù)據(jù)只在構(gòu)建它的窗口或者標(biāo)槍頁中有效
數(shù)據(jù)可被同源的窗口和標(biāo)簽頁共享
由上，可見 localStorage 的生命周期更長，存儲范圍更廣，可用于多個瀏覽器窗口和標(biāo)簽頁或多個視圖之間的數(shù)據(jù)存儲和共享。
構(gòu)建與.NET對應(yīng)的會話機制：
當(dāng)我們的HTML5客戶端應(yīng)用程序要與.Net的后臺程序?qū)由系臅r候，就要構(gòu)建與之對應(yīng)的會話機制，這樣才能達成一致的操作：
我們來看看.net的session 會話機制,它是由服務(wù)端創(chuàng)建，并分配一個sessionid，然后“告訴”給客戶端，而客戶端在每次訪問的時候都會把這個session信息放到http頭中發(fā)送出去，在服務(wù)端有個session列表，存了所有的session的相關(guān)信息，包括session的timeout信息。
在之前的IE6版本：
打開IE登陸一個賬號a。把這個IE叫做IE1.
從桌面上重新打開一個IE。登陸賬號b。這個IE就是b賬號的session。這個IE叫做IE2
IE1和IE2記錄的session是不一樣的。之間的session不影響。
IE7之后的這種標(biāo)簽瀏覽器。一個IE中打開的所有標(biāo)簽，甚至打開多個IE都是共享一個session。
繼續(xù)上面的操作。我們用IE1的菜單欄“文件”-“新建”-“窗口”新建一個IE，叫他IE3。由于IE3是從IE1來的。因此IE3繼承了IE1的session。當(dāng)你用IE3登陸賬號c的時候。IE1、IE3的session都是賬號c。。。然后用IE1登陸賬號d。IE1、IE3登陸的賬號session就成了賬號d的session。
谷歌Chrome瀏覽器打開時候它的所有標(biāo)簽頁或者打開多個Chrome都是共享一個Session的，Session結(jié)束由會話時間TimeOut的超時和整個應(yīng)用程序的生命結(jié)束所決定的。
這個規(guī)則決定同一臺機器上的同源瀏覽器上是不能夠同時操作多個用戶的程序的。這邊說的是同源瀏覽器，也就是說你用IE打開一個應(yīng)用程序，用Chrome打開一個應(yīng)用程序，他們的Session是隔離的，沒有聯(lián)系的。
我們這邊做一個測試，在項目中建兩個aspx頁面，一個頁面為PageOne.aspx，一個頁面為
PageTwo.aspx，他們使用同一個Session，Session["UserName"]
如圖,在PageOne頁面保存Session["UserName"]的值為Ben：
在PageTwo頁面中顯示也是Ben：
所以離線系統(tǒng)也采取了相同的策略：采用localStorage處理會話機制
localStorage
數(shù)據(jù)的生命周期比窗口或瀏覽器的生命周期長
數(shù)據(jù)可被同源的每個窗口、標(biāo)簽頁面或同時打開的瀏覽器共享
所以我們采用localStorage記錄會話機制，用HTML5 的storage事件監(jiān)聽會話的變化：
1、 在用戶登錄的時候記錄會話：
window.localStorage.setItem("sessionMechanism", username);
2、 在其他表單頁面設(shè)置事件監(jiān)聽：
window.addEventListener("storage", checkStorageEvent, true);
function checkStorageEvent(e) {
if (e.key == "sessionMechanism") {
alert("登陸超時！,賬號" + e.newValue + "正在登錄！");
window.location.href = "../login.htm";
}
}
一旦有第二個用戶登錄，不管是同一個瀏覽器的不同標(biāo)簽頁還是不同的瀏覽器窗口，之前的用戶就會超時，并返回到登錄頁面…
這樣就保證了我們在同源的瀏覽器里面一次只能有一個賬戶在登陸操作，如果其他用戶登錄，當(dāng)前用戶就會被迫下線。這樣避免了前后端的用戶不一致導(dǎo)致的錯誤，我們之后會講到跨域通信，離線系統(tǒng)和在線系統(tǒng)的交互，所以在線和離線的登錄用戶必須保持一致。
這邊我們將這個會話機制應(yīng)用到我們的系統(tǒng)中：
現(xiàn)在做一個場景，在這邊我們的登錄頁面上記錄全局的localStorage，一旦登錄成功就記錄當(dāng)前的用戶，所以在login.htm頁面上有這樣一段代碼：
window.localStorage.setItem("sessionMechanism", username);
登錄成功之后到了我們的用戶信息頁面：
同時我們的localStorage就多出了這個鍵值對：
這時我們在登錄頁面登錄另一個賬號Brand用戶：
在用戶信息的頁面會彈出下面這個對話框，并跳轉(zhuǎn)到登錄頁：
這樣就保證了一個同源瀏覽器只有一個用戶在執(zhí)行操作。
本文源碼：
CRX_WebStorage
