WEB前端培訓(xùn)之web Storage可讓網(wǎng)頁(yè)將資料存于本地端的技術(shù)3

更新時(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è)再開(kāi)一個(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ú)論是開(kāi)新分頁(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)掉再開(kāi)都還要存在的場(chǎng)合。
　　隔離
　　此外，瀏覽器會(huì)把不同網(wǎng)站的 local storage 隔離開(kāi)來(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 瀏覽器的「開(kāi)發(fā)人員工具」可以讓你查看、修改、和刪除 Web Storage 資料，參考下圖：
　　