日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

在HTML5中，新增加了方便客戶端存儲的API，這將比傳統(tǒng)的cookies的功能更加強(qiáng)大。盡管目前HTML5標(biāo)準(zhǔn)還在不斷草擬和修改中，還沒最終定稿，但越來越多的瀏覽器已經(jīng)開始對其進(jìn)行支持了。這意味者，在HTML5中，用戶可以使用HTML5專門為存儲方面提供的API: sessionStorage和localStoreage。在本文中將初步探討這兩種API的功能。

玉林網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,玉林網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為玉林上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的玉林做網(wǎng)站的公司定做！

COOKIES的限制和缺陷

首先，讓我們來回顧下cookies。Cookies的出現(xiàn)可謂大大推動了Web的發(fā)展，但它既有優(yōu)點(diǎn)也有一定的缺陷。Cookies的優(yōu)點(diǎn)在于，它可以允許我們在登陸網(wǎng)站時，記住我們輸入的用戶名和密碼，這樣在下一次登陸時就不需要再次輸入了，達(dá)到自動登陸的效果。

另一方面，cookie的安全問題也日趨受到關(guān)注，比如cookie由于存儲在客戶端瀏覽器中，很容易受到黑客的竊取，安全機(jī)制并不是十分好。

另外一個問題是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ò)的負(fù)載。

HTML5中的Web存儲

在HTML5中新出現(xiàn)的Web 存儲機(jī)制正好彌補(bǔ)了cookies的缺點(diǎn)，Web存儲機(jī)制在以下兩方面作了加強(qiáng)：

首先，對于web開發(fā)者來說，它提供了很容易使用的API接口，通過設(shè)置鍵值對即可使用，下文中會有例子談到。

其次，在存儲的容量方面，可以根據(jù)用戶分配的磁盤配額進(jìn)行存儲，這就可以在每個用戶域下存儲不少于5-10MB的內(nèi)容。這就意味者，用戶可以不僅僅存儲session了，還可以在客戶端存儲用戶的設(shè)置偏好，本地化的數(shù)據(jù)，離線的數(shù)據(jù)，這對提高效率是很有幫助的。

而web存儲更提供了使用Javascript編程的接口，這將使得開發(fā)者可以使用Javascript，在客戶端做很多以前要在服務(wù)端才能完成的工作。目前，各主流瀏覽器已經(jīng)開始對web存儲的支持，如下圖：

Session存儲和本地化存儲

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

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

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

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

何時去使用它們

使用localStorage存儲機(jī)制的場合是十分多的，比如你的應(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去存儲圖片等二進(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）。

那么什么時候需要使用sessionStorage呢?在有些情況下，如果你需要當(dāng)瀏覽器窗口關(guān)閉或者不需要數(shù)據(jù)在當(dāng)用戶新打開一個窗口依然能被訪問的情況下，可以使用sessionStorage。比如在運(yùn)行某個游戲的兩個實例或者在運(yùn)行多個單元測試時，不希望數(shù)據(jù)之間有沖突，這時可以使用sessionStorage。

使用WebStorage的API

下面我們講解如何使用WebStorage的API。目前WebStorage的API有如下這些：

◆  length – 獲得當(dāng)前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的操作機(jī)制實際上是對鍵值對進(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存儲數(shù)據(jù)時，在其他瀏覽器窗口或者瀏覽器的選項卡中，會發(fā)生storage事件，如果用戶打開不同的窗口(或者瀏覽器選項卡)訪問同一網(wǎng)址時，在不同的窗口或選項卡之間，會進(jìn)行數(shù)據(jù)同步，如下圖：

當(dāng)用戶修改了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的事件機(jī)制，在Firefox 5, Safari 5, Chrome 12, Opera 10.5 和 IE9中將得到支持。

一個localstorage的例子

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

 
 
 
 

  
  
  
  

  
  
  
  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  

  
  
  
  
  
  
  
  
  
  

  
  
  
  
    You have viewed this page  times. 
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
    
  
  
  
  
  

  
  
  
  
  
  
  
  
  

  
  
  
  

 
 
 
 

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

WebStorage目前存在的問題

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

小結(jié)

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

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

本文題目：實戰(zhàn)HTML5中存儲API可彌補(bǔ)Web開發(fā)缺陷
分享鏈接：http://www.dlmjj.cn/article/ccsjjho.html