更新時(shí)間:2017-06-09 來(lái)源:黑馬程序員web前端培訓(xùn)學(xué)院 瀏覽量:
經(jīng)過(guò)前面的重點(diǎn)提示以及影片的範(fàn)例展示,看官應(yīng)該已經(jīng)大致了解這種兩儲(chǔ)存空間的差別。這裡再稍微啰嗦一下。
有沒(méi)有碰過(guò)一種情形:你在 A 網(wǎng)頁(yè)選了某些選項(xiàng)或輸入資料,想說(shuō)先不要 submit 到下一頁(yè),而選擇將此頁(yè)再開一個(gè)到新視窗,然后在那個(gè)新視窗裡面輸入不同的資料,并且 submit 到下一頁(yè),看看會(huì)產(chǎn)生甚么結(jié)果。比如說(shuō),你可能只是想試試看不同的寄送方式,其運(yùn)費(fèi)的差異是多少。于是,你在第一個(gè)視窗裡面選了一般掛號(hào),然后在另一個(gè)新視窗裡面挑選了快遞。了解價(jià)格差異之后,覺(jué)得快遞太貴了,還是用掛號(hào)就好,于是把選了快遞的那個(gè)新視窗關(guān)閉,回到你塬先的那個(gè)視窗繼續(xù)操作,可是最后確認(rèn)交易時(shí),網(wǎng)頁(yè)送出的卻是「快遞」。
如果使用 cookie 來(lái)保存使用者目前輸入的資料,寫程式時(shí)沒(méi)有特別注意,就有可能會(huì)發(fā)生上述情形。這是因?yàn)?cookie 會(huì)隨著 request 送到服務(wù)器端,然后又隨著 response 送回前端瀏覽器的緣故(于是后來(lái)選擇的「快遞」隨著 response 帶回前端又蓋掉了先前儲(chǔ)存的 cookie 值)。在某些應(yīng)用場(chǎng)合,這種錯(cuò)誤可能會(huì)導(dǎo)致挺嚴(yán)重的后果。
Session storage 就可以解決上述問(wèn)題,因?yàn)樗脑O(shè)計(jì)就是生命週期短--視窗或分頁(yè)關(guān)掉就沒(méi)了,而且有效範(fàn)圍窄--資料無(wú)法跨分頁(yè),所以無(wú)論是開新分頁(yè)或新視窗,在先前那個(gè)分頁(yè)中所儲(chǔ)存于 session storage 中的資料都不會(huì)「撈過(guò)界」。那么,網(wǎng)頁(yè) refresh(按 F5)之后,塬先儲(chǔ)存在 session storage 中的資料呢?放心,都還在!
注意:有些瀏覽器可能會(huì)嘗試延長(zhǎng) session 的壽命。例如當(dāng)某個(gè)分頁(yè)掛掉時(shí),使用者選擇重新啟動(dòng)瀏覽器。有些瀏覽器搞不好會(huì)先把這些 session storage 資料保存到暫存檔案,等到重新啟動(dòng)時(shí)再 restore 這些資料。這只能算是特例啦。
至于 local storage,應(yīng)該就很清楚了:適合用于資料需要跨分頁(yè)、跨視窗,甚至瀏覽器關(guān)掉再開都還要存在的場(chǎng)合。
隔離
此外,瀏覽器會(huì)把不同網(wǎng)站的 local storage 隔離開來(lái)(session storage 自是不在話下)。意思是,某個(gè)網(wǎng)站的網(wǎng)頁(yè)所儲(chǔ)存于 local storage 中的資料,其他網(wǎng)站的網(wǎng)頁(yè)都看不到。
說(shuō)得更精確一點(diǎn),local storage 的資料隔離,係依據(jù)「同源策略」。也就是說(shuō),只有源自相同網(wǎng)站的網(wǎng)頁(yè)才能共享同一塊 local storage。
那么,怎樣才叫做「相同來(lái)源」的網(wǎng)頁(yè)呢?就是網(wǎng)址當(dāng)中的協(xié)定、主機(jī)名稱、傳輸埠這叁者都相同的,即視為相同來(lái)源。
注意:不同協(xié)定即視為不同來(lái)源,所以如果你的網(wǎng)站同時(shí)提供 http 和 https,你知道這意味著什么吧?
注意:不同主機(jī)名稱(host name)即視為不同來(lái)源,所以相同主機(jī)名稱底下的虛擬路徑,是屬于相同來(lái)源。
補(bǔ)充事項(xiàng)
在 HTML5 眾多技術(shù)區(qū)塊當(dāng)中,Web Storage 是可以放心使用的,因?yàn)楝F(xiàn)在幾乎所有的瀏覽器都有實(shí)作這項(xiàng)功能了(IE 8 也有支援)。
雖然 IE 10 有實(shí)作 Web Storage 物件的 remainingSpace 屬性,但 Visual Studio 2012 (RC 版)的 HTML 編輯器的 IntelliSense 功能并不會(huì)出現(xiàn)提示(如前面的影片中所展示的)。
Chrome v19.0.x 不支援 remainingSpace 屬性。
最后,Chrome 瀏覽器的「開發(fā)人員工具」可以讓你查看、修改、和刪除 Web Storage 資料,參考下圖:
本文版權(quán)歸黑馬程序員web前端開發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處,謝謝!
作者:黑馬程序員web前端培訓(xùn)學(xué)院;
首發(fā):http://web.itheima.com/