完美世界前传下载,穿越小说排行榜,完美世界辰东小说下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

實(shí)戰(zhàn)HTML5中存儲(chǔ)API可彌補(bǔ)Web開(kāi)發(fā)缺陷

在HTML5中，新增加了方便客戶端存儲(chǔ)的API，這將比傳統(tǒng)的cookies的功能更加強(qiáng)大。盡管目前HTML5標(biāo)準(zhǔn)還在不斷草擬和修改中，還沒(méi)最終定稿，但越來(lái)越多的瀏覽器已經(jīng)開(kāi)始對(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的限制和缺陷

首先，讓我們來(lái)回顧下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的安全問(wèn)題也日趨受到關(guān)注，比如cookie由于存儲(chǔ)在客戶端瀏覽器中，很容易受到黑客的竊取，安全機(jī)制并不是十分好。

另外一個(gè)問(wèn)題是cookies存儲(chǔ)數(shù)據(jù)的能力有限。目前在很多瀏覽器中規(guī)定每個(gè)cookie只能存儲(chǔ)不超過(guò)4KB的限制，這估計(jì)是來(lái)自

1997年rfc2109中的規(guī)定(http://tools.ietf.org/html/rfc2109)。目前的瀏覽器大多允許用戶創(chuàng)建30到50個(gè)cookies，所以一旦cookie的內(nèi)容超過(guò)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開(kāi)發(fā)者來(lái)說(shuō)，它提供了很容易使用的API接口，通過(guò)設(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編程的接口，這將使得開(kāi)發(fā)者可以使用Javascript，在客戶端做很多以前要在服務(wù)端才能完成的工作。目前，各主流瀏覽器已經(jīng)開(kāi)始對(duì)web存儲(chǔ)的支持，如下圖：

Session存儲(chǔ)和本地化存儲(chǔ)

在HTML5的web存儲(chǔ)中，分為session存儲(chǔ)和本地化存儲(chǔ)兩類。

sesssion存儲(chǔ)只能針對(duì)單一的瀏覽器進(jìn)程或單一頁(yè)面的數(shù)據(jù)，換句話說(shuō)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)

而localStorage則是可以不受瀏覽器窗口進(jìn)程的限制，只要使用localStorage保存了的數(shù)據(jù)，即使在新打開(kāi)了瀏覽器窗口或者將瀏覽器關(guān)閉后，數(shù)據(jù)依然保存。網(wǎng)站在頁(yè)面加載完畢后可以通過(guò)Javascript來(lái)獲取這些數(shù)據(jù)。

要注意的是,以上兩類web存儲(chǔ)機(jī)制，在不同類型的瀏覽器之中還是不能互相訪問(wèn)的，比如在Firefox中用localstorage存儲(chǔ)的時(shí)候，是不能在IE中去訪問(wèn)讀取的。

何時(shí)去使用它們

使用localStorage存儲(chǔ)機(jī)制的場(chǎng)合是十分多的，比如你的應(yīng)用中是一個(gè)在線的任務(wù)應(yīng)用，需要用戶在線填寫(xiě)大量的表單和數(shù)據(jù)，而且在指定的時(shí)間間隔后，才把這些數(shù)據(jù)發(fā)送到服務(wù)端，又或者是在線購(gòu)物時(shí)，用戶的購(gòu)物車(這時(shí)可以在購(gòu)物車中保存更多的數(shù)據(jù)了，等用戶下次再登陸時(shí)，購(gòu)物車中的數(shù)據(jù)依然是存在的)。又或者開(kāi)發(fā)的離線應(yīng)用，用戶在離線狀態(tài)下把數(shù)據(jù)填寫(xiě)好，等在線的時(shí)候，再一次性把數(shù)據(jù)提交。

除此之外，更有研究表明，可以使用localStorage去存儲(chǔ)圖片等二進(jìn)制數(shù)據(jù)(圖片需要經(jīng)過(guò)Base64編碼)，其效率大為提高，詳見(jiàn)這篇文章（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)用戶新打開(kāi)一個(gè)窗口依然能被訪問(wèn)的情況下，可以使用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事件，如果用戶打開(kāi)不同的窗口(或者瀏覽器選項(xiàng)卡)訪問(wèn)同一網(wǎng)址時(shí)，在不同的窗口或選項(xiàng)卡之間，會(huì)進(jìn)行數(shù)據(jù)同步，如下圖：

當(dāng)用戶修改了localstorage中的數(shù)據(jù)內(nèi)容時(shí)，如將新的數(shù)據(jù)值賦值給原來(lái)的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為原來(lái)舊的key的名稱，event.oldValue為舊的key所對(duì)應(yīng)的值，event.newValue為新的key的值。

storage的事件機(jī)制，在Firefox 5, Safari 5, Chrome 12, Opera 10.5 和 IE9中將得到支持。

一個(gè)localstorage的例子

***，我們來(lái)看一個(gè)localstorage的小例子，例子運(yùn)行后，當(dāng)每次加載刷新頁(yè)面時(shí)，會(huì)顯示當(dāng)前已刷新的次數(shù)給用戶，代碼如下：

 
 
 
 
  
  
  
  
  
  
  
  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  
  
  
  
  
  
    
  
  
  
    
  
  
  
    
  
  
  
    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'); 
  
  
  
    } 
  
  
  
    
  
  
  
  
  
  
  
  
  
  
  
    
  
  
  
    
  
  
  
      You have viewed this page  times.

在上面的代碼中在pageLoadCounter()事件中，首先判斷l(xiāng)ocalstorage中是否有l(wèi)ocalCounter的值存在，如果沒(méi)的話，則初始化為0，然后每當(dāng)刷新頁(yè)面時(shí)，使用setItem方法重新設(shè)置了loadCounter的值，令其加1，***再顯示在頁(yè)面中。

WebStorage目前存在的問(wèn)題

目前，WebStorage的機(jī)制實(shí)現(xiàn)方面，其安全性依然跟cookies一樣，還是有令人擔(dān)憂的地方，所以建議敏感數(shù)據(jù)是不要直接通過(guò)web storage機(jī)制進(jìn)行保存。

小結(jié)

在本文中，對(duì)HTML5的新增的webstorage存儲(chǔ)機(jī)制進(jìn)行了初步的簡(jiǎn)單介紹，介紹了sessionStorage及l(fā)ocalStorage的特點(diǎn)和應(yīng)用場(chǎng)合，以及它們的使用的API和事件，分析了其中的不足之處。相信隨著HTML5標(biāo)準(zhǔn)的逐漸完善，各瀏覽廠商的不斷努力下，Webstorage機(jī)制在不久的將來(lái)將更加完善。

原文：http://tech.it168.com/a2011/0828/1238/000001238694_all.shtml

文章名稱：實(shí)戰(zhàn)HTML5中存儲(chǔ)API可彌補(bǔ)Web開(kāi)發(fā)缺陷
網(wǎng)站URL：http://m.fisionsoft.com.cn/article/ccsjjho.html

新聞中心

其他資訊