實戰(zhàn)HTML 5中存儲API 可彌補Web開發(fā)缺陷
在HTML5中，新增加了方便客戶端存儲的API，這將比傳統(tǒng)的cookies的功能更加強大。盡管目前HTML5標準還在不斷草擬和修改中，還沒最終定稿，但越來越多的瀏覽器已經(jīng)開始對其進行支持了。這意味者，在HTML5中，用戶可以使用HTML5專門為存儲方面提供的API: sessionStorage和localStoreage。在本文中將初步探討這兩種API的功能。
COOKIES的限制和缺陷
首先，讓我們來回顧下cookies。Cookies的出現(xiàn)可謂大大推動了Web的發(fā)展，但它既有優(yōu)點也有一定的缺陷。Cookies的優(yōu)點在于，它可以允許我們在登陸網(wǎng)站時，記住我們輸入的用戶名和密碼，這樣在下一次登陸時就不需要再次輸入了，達到自動登陸的效果。
另一方面，cookie的安全問題也日趨受到關(guān)注，比如cookie由于存儲在客戶端瀏覽器中，很容易受到黑客的竊取，安全機制并不是十分好。
另外一個問題是cookies存儲數(shù)據(jù)的能力有限。目前在很多瀏覽器中規(guī)定每個cookie只能存儲不超過4KB的限制，這估計是來自
1997年rfc2109中的規(guī)定(http://tools.ietf.org/html/rfc2109)。目前的瀏覽器大多允許用戶創(chuàng)建30到50個cookies，所以一旦cookie的內(nèi)容超過4KB，唯一的方法是重新創(chuàng)建。
此外，cookie的一個缺陷是每次的HTTP請求中都必須附帶cookie，這將有可能增加網(wǎng)絡(luò)的負載。
HTML5中的Web存儲
在HTML5中新出現(xiàn)的Web 存儲機制正好彌補了cookies的缺點，Web存儲機制在以下兩方面作了加強：
首先，對于web開發(fā)者來說，它提供了很容易使用的API接口，通過設(shè)置鍵值對即可使用，下文中會有例子談到。
其次，在存儲的容量方面，可以根據(jù)用戶分配的磁盤配額進行存儲，這就可以在每個用戶域下存儲不少于5-10MB的內(nèi)容。這就意味者，用戶可以不僅僅存儲session了，還可以在客戶端存儲用戶的設(shè)置偏好，本地化的數(shù)據(jù)，離線的數(shù)據(jù)，這對提高效率是很有幫助的。
而web存儲更提供了使用Javascript編程的接口，這將使得開發(fā)者可以使用Javascript，在客戶端做很多以前要在服務(wù)端才能完成的工作。目前，各主流瀏覽器已經(jīng)開始對web存儲的支持，如下圖：
Session存儲和本地化存儲
在HTML5的web存儲中，分為session存儲和本地化存儲兩類。
sesssion存儲只能針對單一的瀏覽器進程或單一頁面的數(shù)據(jù)，換句話說，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲
而localStorage則是可以不受瀏覽器窗口進程的限制，只要使用localStorage保存了的數(shù)據(jù)，即使在新打開了瀏覽器窗口或者將瀏覽器關(guān)閉后，數(shù)據(jù)依然保存。網(wǎng)站在頁面加載完畢后可以通過Javascript來獲取這些數(shù)據(jù)。
要注意的是,以上兩類web存儲機制，在不同類型的瀏覽器之中還是不能互相訪問的，比如在Firefox中用localstorage存儲的時候，是不能在IE中去訪問讀取的。
何時去使用它們
使用localStorage存儲機制的場合是十分多的，比如你的應(yīng)用中是一個在線的任務(wù)應(yīng)用，需要用戶在線填寫大量的表單和數(shù)據(jù)，而且在指定的時間間隔后，才把這些數(shù)據(jù)發(fā)送到服務(wù)端，又或者是在線購物時，用戶的購物車(這時可以在購物車中保存更多的數(shù)據(jù)了，等用戶下次再登陸時，購物車中的數(shù)據(jù)依然是存在的)。又或者開發(fā)的離線應(yīng)用，用戶在離線狀態(tài)下把數(shù)據(jù)填寫好，等在線的時候，再一次性把數(shù)據(jù)提交。
除此之外，更有研究表明，可以使用localStorage去存儲圖片等二進制數(shù)據(jù)(圖片需要經(jīng)過Base64編碼)，其效率大為提高，詳見這篇文章（http://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/html5_code_example_store_images_using_localstorage57?lang=en）。
那么什么時候需要使用sessionStorage呢?在有些情況下，如果你需要當瀏覽器窗口關(guān)閉或者不需要數(shù)據(jù)在當用戶新打開一個窗口依然能被訪問的情況下，可以使用sessionStorage。比如在運行某個游戲的兩個實例或者在運行多個單元測試時，不希望數(shù)據(jù)之間有沖突，這時可以使用sessionStorage。
使用WebStorage的API
下面我們講解如何使用WebStorage的API。目前WebStorage的API有如下這些：
◆ length – 獲得當前webstorage中的數(shù)目。
◆ key(n) – 返回webstorage中的第N個存儲條目
◆ getItem(key) –返回指定key的存儲內(nèi)容，如果不存在則返回null。注意，返回的類型是String字符串類型。
◆ setItem(key, value) –設(shè)置指定key的內(nèi)容的值為value
◆ removeItem(key) 根據(jù)指定的KEY，刪除鍵值為key的內(nèi)容。
◆ clear – 清空webstorate的內(nèi)容。
可以看到，webstorage API的操作機制實際上是對鍵值對進行的操作。下面是一些相關(guān)的例子：
- localStorage.setItem("key", "value);
- var val = localStorage.getItem("key");
當然也可以直接使用localStorage的key方法，而不使用setItem和getItem方法，如下：
- localStorage.key = "value";
- var val = localStorage.key;
在有的瀏覽器中，甚至支持使用如下的方式進行設(shè)置：
- localStorage["key"] = "value";
- var val = localStorage["key"];
要注意的是，sessionStorage和localStorage的使用方法是一樣的，所以例子這里就不再詳細給出。
WebStorage的相關(guān)事件
當我們使用localstorage存儲數(shù)據(jù)時，在其他瀏覽器窗口或者瀏覽器的選項卡中，會發(fā)生storage事件，如果用戶打開不同的窗口(或者瀏覽器選項卡)訪問同一網(wǎng)址時，在不同的窗口或選項卡之間，會進行數(shù)據(jù)同步，如下圖：
當用戶修改了localstorage中的數(shù)據(jù)內(nèi)容時，如將新的數(shù)據(jù)值賦值給原來的KEY時，會發(fā)生storage事件，事件的響應(yīng)代碼如下：
- 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所對應(yīng)的值，event.newValue為新的key的值。
storage的事件機制，在Firefox 5, Safari 5, Chrome 12, Opera 10.5 和 IE9中將得到支持。
一個localstorage的例子
***，我們來看一個localstorage的小例子，例子運行后，當每次加載刷新頁面時，會顯示當前已刷新的次數(shù)給用戶，代碼如下：
- <!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()事件中，首先判斷l(xiāng)ocalstorage中是否有l(wèi)ocalCounter的值存在，如果沒的話，則初始化為0，然后每當刷新頁面時，使用setItem方法重新設(shè)置了loadCounter的值，令其加1，***再顯示在頁面中。
WebStorage目前存在的問題
目前，WebStorage的機制實現(xiàn)方面，其安全性依然跟cookies一樣，還是有令人擔憂的地方，所以建議敏感數(shù)據(jù)是不要直接通過web storage機制進行保存。
小結(jié)
在本文中， 對HTML5的新增的webstorage存儲機制進行了初步的簡單介紹，介紹了sessionStorage及l(fā)ocalStorage的特點和應(yīng)用場合，以及它們的使用的API和事件，分析了其中的不足之處。相信隨著HTML5標準的逐漸完善，各瀏覽廠商的不斷努力下，Webstorage機制在不久的將來將更加完善。
原文：http://tech.it168.com/a2011/0828/1238/000001238694_all.shtml
【編輯推薦】
