實戰HTML 5中存儲API 可彌補Web開發缺陷
在HTML5中，新增加了方便客戶端存儲的API，這將比傳統的cookies的功能更加強大。盡管目前HTML5標準還在不斷草擬和修改中，還沒最終定稿，但越來越多的瀏覽器已經開始對其進行支持了。這意味者，在HTML5中，用戶可以使用HTML5專門為存儲方面提供的API: sessionStorage和localStoreage。在本文中將初步探討這兩種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編碼)，其效率大為提高，詳見這篇文章（http://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/html5_code_example_store_images_using_localstorage57?lang=en）。
那么什么時候需要使用sessionStorage呢?在有些情況下，如果你需要當瀏覽器窗口關閉或者不需要數據在當用戶新打開一個窗口依然能被訪問的情況下，可以使用sessionStorage。比如在運行某個游戲的兩個實例或者在運行多個單元測試時，不希望數據之間有沖突，這時可以使用sessionStorage。
使用WebStorage的API
下面我們講解如何使用WebStorage的API。目前WebStorage的API有如下這些：
◆ length – 獲得當前webstorage中的數目。
◆ key(n) – 返回webstorage中的第N個存儲條目
◆ getItem(key) –返回指定key的存儲內容，如果不存在則返回null。注意，返回的類型是String字符串類型。
◆ setItem(key, value) –設置指定key的內容的值為value
◆ removeItem(key) 根據指定的KEY，刪除鍵值為key的內容。
◆ clear – 清空webstorate的內容。
可以看到，webstorage API的操作機制實際上是對鍵值對進行的操作。下面是一些相關的例子：
- localStorage.setItem("key", "value);
- var val = localStorage.getItem("key");
當然也可以直接使用localStorage的key方法，而不使用setItem和getItem方法，如下：
- localStorage.key = "value";
- var val = localStorage.key;
在有的瀏覽器中，甚至支持使用如下的方式進行設置：
- localStorage["key"] = "value";
- var val = localStorage["key"];
要注意的是，sessionStorage和localStorage的使用方法是一樣的，所以例子這里就不再詳細給出。
WebStorage的相關事件
當我們使用localstorage存儲數據時，在其他瀏覽器窗口或者瀏覽器的選項卡中，會發生storage事件，如果用戶打開不同的窗口(或者瀏覽器選項卡)訪問同一網址時，在不同的窗口或選項卡之間，會進行數據同步，如下圖：
當用戶修改了localstorage中的數據內容時，如將新的數據值賦值給原來的KEY時，會發生storage事件，事件的響應代碼如下：
- window.addEventListener('storage', function(event) {
- console.log('The value for ' + event.key + ' was changed from' + event.oldValue + ' to ' + event.newValue);
- }, false);
其中,event.key為原來舊的key的名稱，event.oldValue為舊的key所對應的值，event.newValue為新的key的值。
storage的事件機制，在Firefox 5, Safari 5, Chrome 12, Opera 10.5 和 IE9中將得到支持。
一個localstorage的例子
***，我們來看一個localstorage的小例子，例子運行后，當每次加載刷新頁面時，會顯示當前已刷新的次數給用戶，代碼如下：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <script type="text/javascript">
- function pageLoadCounter() {
- if (!localStorage.getItem('loadCounter')) {
- localStorage.setItem('loadCounter', 0);
- }
- localStorage.setItem('loadCounter', parseInt(localStorage.getItem('loadCounter')) + 1);
- document.getElementById('counter').innerHTML = localStorage.getItem('loadCounter');
- }
- </script>
- </head>
- <body onload="pageLoadCounter()">
- <form id="form1">
- <p>
- You have viewed this page <span id="counter"></span> times.
- </p>
- <p>
- <input type="button" onclick="localStorage.clear();" value="Clear Storage" />
- </p>
- </form>
- </body>
- </html>
在上面的代碼中在pageLoadCounter()事件中，首先判斷localstorage中是否有localCounter的值存在，如果沒的話，則初始化為0，然后每當刷新頁面時，使用setItem方法重新設置了loadCounter的值，令其加1，***再顯示在頁面中。
WebStorage目前存在的問題
目前，WebStorage的機制實現方面，其安全性依然跟cookies一樣，還是有令人擔憂的地方，所以建議敏感數據是不要直接通過web storage機制進行保存。
小結
在本文中， 對HTML5的新增的webstorage存儲機制進行了初步的簡單介紹，介紹了sessionStorage及localStorage的特點和應用場合，以及它們的使用的API和事件，分析了其中的不足之處。相信隨著HTML5標準的逐漸完善，各瀏覽廠商的不斷努力下，Webstorage機制在不久的將來將更加完善。
原文：http://tech.it168.com/a2011/0828/1238/000001238694_all.shtml
【編輯推薦】
