彌補Web開發缺陷實戰 HTML5 中儲存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。