彌補Web開發缺陷 實戰HTML 5中存儲API

 COOKIES的限制和缺陷

  首先,讓我們來回顧下cookies。Cookies的出現可謂大大推動了Web的發展,但它既有優點也有一定的缺陷。Cookies的優點在於,它可以允許我們在登陸網站時,記住我們輸入的用戶名和密碼,這樣在下一次登陸時就不需要再次輸入了,達到自動登陸的效果。

  另一方面,cookie的安全問題也日趨受到關注,比如cookie由於存儲在客戶端瀏覽器中,很容易受到***的竊取,安全機制並不是十分好。

  另外一個問題是cookies存儲數據的能力有限。目前在很多瀏覽器中規定每個cookie只能存儲不超過4KB的限制,這估計是來自

  1997年rfc2109中的規定(http://tools.ietf.org/html/rfc2109)。目前的瀏覽器大多允許用戶創建30到50個cookies,所以一旦cookie的內容超過4KB,唯一的方法是重新創建。

  此外,cookie的一個缺陷是每次的HTTP請求中都必須附帶cookie,這將有可能增加網絡的負載。

  HTML5中的Web存儲

  在HTML5中新出現的Web 存儲機制正好彌補了cookies的缺點,Web存儲機制在以下兩方面作了加強:

  首先,對於web開發者來說,它提供了很容易使用的API接口,通過設置鍵值對即可使用,下文中會有例子談到。

  其次,在存儲的容量方面,可以根據用戶分配的磁盤配額進行存儲,這就可以在每個用戶域下存儲不少於5-10MB的內容。這就意味者,用戶可以不僅僅存儲session了,還可以在客戶端存儲用戶的設置偏好,本地化的數據,離線的數據,這對提高效率是很有幫助的。

  而web存儲更提供了使用Javascript編程的接口,這將使得開發者可以使用Javascript,在客戶端做很多以前要在服務端才能完成的工作。目前,各主流瀏覽器已經開始對web存儲的支持,如下圖:
 

  Session存儲和本地化存儲

  在HTML5的web存儲中,分爲session存儲和本地化存儲兩類。

  sesssion存儲只能針對單一的瀏覽器進程或單一頁面的數據,換句話說,這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷燬。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲

  而localStorage則是可以不受瀏覽器窗口進程的限制,只要使用localStorage保存了的數據,即使在新打開了瀏覽器窗口或者將瀏覽器關閉後,數據依然保存。網站在頁面加載完畢後可以通過Javascript來獲取這些數據。

  要注意的是,以上兩類web存儲機制,在不同類型的瀏覽器之中還是不能互相訪問的,比如在Firefox中用localstorage存儲的時候,是不能在IE中去訪問讀取的。

  何時去使用它們

  使用localStorage存儲機制的場合是十分多的,比如你的應用中是一個在線的任務應用,需要用戶在線填寫大量的表單和數據,而且在指定的時間間隔後,才把這些數據發送到服務端,又或者是在線購物時,用戶的購物車(這時可以在購物車中保存更多的數據了,等用戶下次再登陸時,購物車中的數據依然是存在的)。又或者開發的離線應用,用戶在離線狀態下把數據填寫好,等在線的時候,再一次性把數據提交。

  除此之外,更有研究表明,可以使用localStorage去存儲圖片等二進制數據(圖片需要經過Base64編碼),其效率大爲提高,詳見這篇文章

  那麼什麼時候需要使用sessionStorage呢?在有些情況下,如果你需要當瀏覽器窗口關閉或者不需要數據在當用戶新打開一個窗口依然能被訪問的情況下,可以使用sessionStorage。比如在運行某個遊戲的兩個實例或者在運行多個單元測試時,不希望數據之間有衝突,這時可以使用sessionStorage。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章