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

經(jīng)過前面的重點提示以及影片的範例展示，看官應該已經(jīng)大致了解這種兩儲存空間的差別。這裡再稍微啰嗦一下。
　　有沒有碰過一種情形：你在 A 網(wǎng)頁選了某些選項或輸入資料，想說先不要 submit 到下一頁，而選擇將此頁再開一個到新視窗，然后在那個新視窗裡面輸入不同的資料，并且 submit 到下一頁，看看會產(chǎn)生甚么結果。比如說，你可能只是想試試看不同的寄送方式，其運費的差異是多少。于是，你在第一個視窗裡面選了一般掛號，然后在另一個新視窗裡面挑選了快遞。了解價格差異之后，覺得快遞太貴了，還是用掛號就好，于是把選了快遞的那個新視窗關閉，回到你塬先的那個視窗繼續(xù)操作，可是最后確認交易時，網(wǎng)頁送出的卻是「快遞」。
　　如果使用 cookie 來保存使用者目前輸入的資料，寫程式時沒有特別注意，就有可能會發(fā)生上述情形。這是因為 cookie 會隨著 request 送到服務器端，然后又隨著 response 送回前端瀏覽器的緣故(于是后來選擇的「快遞」隨著 response 帶回前端又蓋掉了先前儲存的 cookie 值)。在某些應用場合，這種錯誤可能會導致挺嚴重的后果。
　　Session storage 就可以解決上述問題，因為它的設計就是生命週期短--視窗或分頁關掉就沒了，而且有效範圍窄--資料無法跨分頁，所以無論是開新分頁或新視窗，在先前那個分頁中所儲存于 session storage 中的資料都不會「撈過界」。那么，網(wǎng)頁 refresh(按 F5)之后，塬先儲存在 session storage 中的資料呢?放心，都還在!
　　注意：有些瀏覽器可能會嘗試延長 session 的壽命。例如當某個分頁掛掉時，使用者選擇重新啟動瀏覽器。有些瀏覽器搞不好會先把這些 session storage 資料保存到暫存檔案，等到重新啟動時再 restore 這些資料。這只能算是特例啦。
　　至于 local storage，應該就很清楚了：適合用于資料需要跨分頁、跨視窗，甚至瀏覽器關掉再開都還要存在的場合。
　　隔離
　　此外，瀏覽器會把不同網(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 眾多技術區(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 資料，參考下圖：
　　 

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