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