網(wǎng)頁的安全和隱私

自從有了動(dòng)態(tài)網(wǎng)頁以來，在網(wǎng)頁中進(jìn)行注冊(cè)登錄已經(jīng)成為了動(dòng)態(tài)網(wǎng)頁的標(biāo)配裕便。與此同時(shí)绒净，人們也在不斷改善和優(yōu)化網(wǎng)頁，以帶給用戶更好的瀏覽效果偿衰。很自然的挂疆，人們?cè)诘卿涰撁嬉沧隽撕芏鄡?yōu)化，比如客戶端校驗(yàn)下翎，客戶端導(dǎo)航提示缤言。由于瀏覽器無法對(duì)用戶的操作做任何限制，人們可以隨時(shí)打開视事，隨手關(guān)閉胆萧，當(dāng)人們多次訪問同一個(gè)網(wǎng)頁時(shí)，難免會(huì)出現(xiàn)反復(fù)登錄的情況郑口，這時(shí)候人們希望有一種記憶功能鸳碧，能夠記憶之前輸入過的賬戶或密碼盾鳞，避免人們反復(fù)輸入犬性。早先的做法是將賬戶密碼寫入硬盤瞻离，可以反復(fù)讀取，但是硬盤是一個(gè)公共區(qū)域乒裆，任何程序都可以讀取套利，這極不安全。雖然用戶愿意將個(gè)人信息在網(wǎng)頁上進(jìn)行填寫鹤耍，但不表示他們?cè)敢鈱⑦@些信息永久地保存在硬盤肉迫，但有人就這么做了，最終導(dǎo)致了一些用戶直接禁用本地存儲(chǔ)功能稿黄。本文討論一些更為安全的本地存儲(chǔ)以提升用戶體驗(yàn)喊衫，盡管如此，對(duì)于這些本地存儲(chǔ)也不能濫用杆怕，一旦濫用族购，同樣有遭到禁用的風(fēng)險(xiǎn)。

Web存儲(chǔ)

這是一個(gè)新概念陵珍，隨HTML5標(biāo)準(zhǔn)提出來的寝杖，后來又從HTML5中分離出來成為一個(gè)獨(dú)立的標(biāo)準(zhǔn)。目前客戶端的實(shí)現(xiàn)主要包含在localStorage和sessionStorage對(duì)象中互纯。目前所有主流瀏覽器都支持該實(shí)現(xiàn)瑟幕，早期瀏覽器不支持。localStorage和sessionStorage是持久化關(guān)聯(lián)數(shù)組留潦，是名值對(duì)映射表只盹，支持大容量數(shù)據(jù)存儲(chǔ)。和使用普通的JavaScript對(duì)象沒有什么區(qū)別兔院。localStorage和sessionStorage的區(qū)別是存儲(chǔ)的有效期和作用域不同殖卑。關(guān)于它們的使用，請(qǐng)參考下面的代碼片段：

var name = localStorage.username;
name = localStorage["username"];
if(!name){
    name = prompt("What is your name?");
    localStorage.username = name;
}
for(var name in localStorage)
{
    var value = localStorage[name];
}

標(biāo)準(zhǔn)規(guī)定秆乳，Web存儲(chǔ)不僅可以存儲(chǔ)原始類型的數(shù)據(jù)懦鼠，也可以存儲(chǔ)對(duì)象和數(shù)組，還可以存儲(chǔ)日期屹堰，正則肛冶，甚至文件對(duì)象等內(nèi)置類型的數(shù)據(jù)。

Web存儲(chǔ)的有效期和作用域

localStorage的有效期是永久扯键，除非是程序?qū)?shù)據(jù)進(jìn)行了刪除睦袖，否則數(shù)據(jù)永不過期。localStorage的作用域受同源策略影響荣刑，同源的網(wǎng)頁之間可以共享localStorage馅笙，可以相互讀取對(duì)方的數(shù)據(jù)伦乔，也可以修改和覆蓋對(duì)方的數(shù)據(jù)，非同源網(wǎng)頁之間則不行董习。同源策略指的是協(xié)議烈和，域名，端口號(hào)相同的網(wǎng)頁之間可以相互訪問對(duì)方的數(shù)據(jù)皿淋。另外一點(diǎn)需要注意招刹，localStorage也受瀏覽器的影響，比如說窝趣，firefox的存儲(chǔ)的數(shù)據(jù)可能在Ie上就訪問不到疯暑。sessionStorage的有效期是當(dāng)前頁面，一旦頁面關(guān)閉哑舒，數(shù)據(jù)也被清除妇拯。sessionStorage的作用域同樣受同源策略影響，只有同源網(wǎng)頁才能共享數(shù)據(jù)洗鸵，并且網(wǎng)頁還必須在一個(gè)窗口中越锈，也就是說，只有處于一個(gè)窗口中的兩個(gè)iframe才能共享數(shù)據(jù)预麸。不同窗口的同源網(wǎng)頁也不能共享數(shù)據(jù)瞪浸。

Web存儲(chǔ)API

localStorage和sessionStorage的使用方式非常相似。以localStorage為例吏祸，下面的的代碼對(duì)sessionStorage同樣適用对蒲。

localStorage.setItem("x", 1);//存儲(chǔ)一個(gè)數(shù)值
localStorage.getItem("x");//獲取數(shù)值

//枚舉所有名/值對(duì)
for(var i = 0; i < localStorage.length; i++)
{
    var name = localStorage.key(i);
    var value = localStorage.getItem(name);
}

localStorage.removeItem("x");//刪除一項(xiàng)
localStorage.clear();//刪除所有

上述代碼中有一個(gè)值得探討的地方是，localStorage的存儲(chǔ)我們?yōu)楹尾粚懗蒷ocalStorage.x = 1贡翘？這樣似乎更簡(jiǎn)潔明了蹈矮。取值的時(shí)候直接localStorage.x，這樣書寫豈不是更簡(jiǎn)單鸣驱？的確是更簡(jiǎn)單泛鸟。但是標(biāo)準(zhǔn)規(guī)定存儲(chǔ)對(duì)象只能存儲(chǔ)數(shù)據(jù)的副本，程序?qū)?shù)據(jù)的改變不能影響存儲(chǔ)對(duì)象踊东。以下面的代碼為例：

localStorage.o = {x:1};
localStorage.o.x = 2;
localStorage.o.x;

如果我們?cè)诔绦蛑惺褂眠@樣的代碼北滥，那么我們每次修改數(shù)據(jù)都直接影響了存儲(chǔ)數(shù)據(jù)，這顯然是和標(biāo)準(zhǔn)沖突闸翅，也不符合我們?nèi)粘５男枨笤儆螅脩敉ǔ６际窃谒行畔⑻顚懲瓿珊螅淮涡源鎯?chǔ)所有數(shù)據(jù)坚冀，而不是每填寫一項(xiàng)就保存一次济赎。我們對(duì)代碼稍做修改，如下面這樣，就符合標(biāo)準(zhǔn)司训，也更符合日常實(shí)際构捡。

var obj = localStorage.getItem("o");
obj.x = 2;
obj.y = 3;
localStorage.setItem("o", obj);

Web存儲(chǔ)事件

一旦頁面的localStorage或者sessionStorage發(fā)生改變，那么當(dāng)前的同源頁面就會(huì)收到存儲(chǔ)事件壳猜。需要注意的是數(shù)據(jù)發(fā)生改變的頁面不會(huì)收到事件勾徽。可以通過addEventListener()方法注冊(cè)事件處理程序蓖谢，代碼如下：

window.addEventListener("storage", function(event){
    /*
    event的幾個(gè)重要屬性：
    1.key
    項(xiàng)目名字
    2.newValue
    新值
    3.oldVlue
    舊值
    4.storageArea
    存儲(chǔ)對(duì)象
    5.url
    觸發(fā)存儲(chǔ)事件的文檔URL
    */
})

需要注意的是捂蕴，由于存儲(chǔ)事件采用的是廣播機(jī)制儿子，因此localStorage會(huì)廣播所有訪問同一站點(diǎn)的窗口切黔，比如我們?cè)谑醉撛O(shè)置停止動(dòng)畫费封，那么所有其他詳情頁都會(huì)收到廣播事件，從而都停止動(dòng)畫盯腌，sessionStorage則不會(huì)這樣。

Cookie

Cookie是一種比較古老的技術(shù)陨瘩。它最初的目的是為了讓服務(wù)器識(shí)別客戶端身份腕够，以便給不同身份的客戶端提供個(gè)性化服務(wù)，這就是我們說的動(dòng)態(tài)網(wǎng)頁技術(shù)舌劳。Cookie是動(dòng)態(tài)網(wǎng)頁的基石帚湘，由于Http協(xié)議是無狀態(tài)的，每次請(qǐng)求完成后就關(guān)閉連接甚淡，因此狀態(tài)保持無法通過Http協(xié)議自身來完成大诸，Cookie解決了這個(gè)問題。Cookie的使用非常簡(jiǎn)單贯卦，和上面的Web存儲(chǔ)類似资柔，這里不多做介紹。需要注意的是Cookie的有效期可以通過max-age進(jìn)行設(shè)置撵割。另外Cookie也嚴(yán)格遵守同源策略贿堰，作用域可以通過path和domain進(jìn)行設(shè)置，Cookie只對(duì)當(dāng)前頁和當(dāng)前頁的子路徑下的頁面是可見的啡彬。

Cookie的局限性

Cookie的特殊之處在于每次請(qǐng)求都會(huì)帶上Cookie信息羹与，就好比你每次去政府機(jī)關(guān)辦事都必須帶上身份證一樣，因此Cookie不太適合存儲(chǔ)大量的信息庶灿。RFC2965標(biāo)準(zhǔn)不允許瀏覽器保存超過300個(gè)Cookie纵搁，同時(shí)為每個(gè)Web服務(wù)器保存的Cookie不能超過20個(gè)，而且每個(gè)Cookie保存的數(shù)據(jù)不能超過4K跳仿。理論上來說诡渴，Cookie的數(shù)量和大小都不應(yīng)該做任何限制，但是出于性能的考慮，我們?cè)趯?shí)際應(yīng)用中就不得不做上述限制妄辩。

其他客戶端存儲(chǔ)

IE userData

在IE5以上的版本中惑灵，可以給Html元素附加一個(gè)userData行為，從而使該元素具有l(wèi)oad和save方法眼耀，用于載入和保存客戶端存儲(chǔ)的數(shù)據(jù)英支。它的作用域比Cookie小，只在當(dāng)前目錄有效哮伟，不包含子目錄干花，存儲(chǔ)的數(shù)據(jù)量比Cookie大。具體的楞黄，可查閱更詳細(xì)的相關(guān)文檔池凄。因?yàn)樵摴δ苤辉贗E上有效，因此適用范圍很有限鬼廓。

應(yīng)用程序存儲(chǔ)

和localStorage不同的肿仑，應(yīng)用程序存儲(chǔ)不是僅僅保存數(shù)據(jù)，而是將整個(gè)頁面保存下來碎税。同時(shí)應(yīng)用程序緩存不會(huì)因?yàn)榍宄秊g覽器緩存而清除掉尤慰，它更像是一個(gè)安裝在瀏覽器端的一個(gè)固定的應(yīng)用。除非是用戶手動(dòng)刪除雷蹂，否則它就永久的駐扎在那里伟端。應(yīng)用程序緩存包含一系列頁面，是一個(gè)完整的網(wǎng)頁應(yīng)用匪煌。因此责蝠，它有一個(gè)緩存清單。有關(guān)應(yīng)用程序緩存虐杯，需要較大篇幅敘述玛歌，具體的，可以參考更專業(yè)的文檔擎椰。應(yīng)用程序存儲(chǔ)是HTML5標(biāo)準(zhǔn)新增的功能支子，各主流瀏覽器都支持。

好了达舒，關(guān)于客戶端存儲(chǔ)就是這些值朋，你都掌握了嗎？