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

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

本文版權(quán)歸傳智播客web前端開發(fā)學院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處，謝謝！
作者：傳智播客web前端培訓學院；
首發(fā)：http://oisangadgets.com/web/