前端開(kāi)發(fā)lec7 web存儲(chǔ)

Web存儲(chǔ)

版本管理修改記錄

審核記錄版本號(hào).作者描述修改日期V01肖志譚FirstDraft20121208V02袁文哲20130827版本號(hào).職務(wù)簽名修改日期主要內(nèi)容web存儲(chǔ)簡(jiǎn)介html5的web存儲(chǔ)機(jī)制web離線(xiàn)版本的實(shí)現(xiàn)web存儲(chǔ)案例應(yīng)用web存儲(chǔ)簡(jiǎn)介存儲(chǔ)是根據(jù)不同的應(yīng)用環(huán)境通過(guò)采取合理、安全、有效的方式將數(shù)據(jù)保存到某些介質(zhì)上并能保證有效的訪問(wèn)，總的來(lái)講可以包含兩個(gè)方面的含義：一方面它是數(shù)據(jù)臨時(shí)或長(zhǎng)期駐留的物理媒介；另一方面，它是保證數(shù)據(jù)完整安全存放的方式或行為。存儲(chǔ)就是把這兩個(gè)方面結(jié)合起來(lái)，向客戶(hù)提供一套數(shù)據(jù)存放解決方案。web存儲(chǔ)簡(jiǎn)介長(zhǎng)久以來(lái)本地存儲(chǔ)能力一直是桌面應(yīng)用區(qū)別于Web應(yīng)用的一個(gè)主要優(yōu)勢(shì)。對(duì)于桌面應(yīng)用（或者原生應(yīng)用)，操作系統(tǒng)一般都提供了一個(gè)抽象層用來(lái)幫助應(yīng)用程序保存其本地?cái)?shù)據(jù)。例如（用戶(hù)配置信息或者運(yùn)行時(shí)狀態(tài)等)。常見(jiàn)的存放這些數(shù)據(jù)的方式有許多：注冊(cè)表，INI文件，XML文件等等。除了上面這些比較簡(jiǎn)單的用來(lái)存放鍵值對(duì)的存儲(chǔ)形式，如果需要使用更加復(fù)雜強(qiáng)大的存儲(chǔ)，那么還可以進(jìn)一步在應(yīng)用程序中嵌入小型數(shù)據(jù)庫(kù)，或者開(kāi)發(fā)出特定的數(shù)據(jù)文件格式。web存儲(chǔ)發(fā)展史web存儲(chǔ)發(fā)展史cookie：在很長(zhǎng)時(shí)間里Cookies是唯一可以使用的在用戶(hù)本地存儲(chǔ)少量數(shù)據(jù)的方法。但Cookies有一些非常明顯的缺陷，限制了它的應(yīng)用:cookie會(huì)被附加在每個(gè)HTTP請(qǐng)求中，所以無(wú)形中增加了流量。由于在HTTP請(qǐng)求中的cookie是明文傳遞的，所以安全性成問(wèn)題。（除非你的整個(gè)應(yīng)用都是使用SSL來(lái)構(gòu)建的)cookie的大小限制在4KB左右。對(duì)于復(fù)雜的存儲(chǔ)需求來(lái)說(shuō)是不夠用的。web存儲(chǔ)發(fā)展史UserData：

是微軟為IE專(zhuān)門(mén)在系統(tǒng)中開(kāi)辟的一塊存儲(chǔ)空間，所以說(shuō)只支持Windows+IE的組合，實(shí)際測(cè)試在2000（IE5.5）、XP（IE6、IE7），Vista（IE7、IE8）下都是可以正常使用的。單個(gè)文件的大小限制是128KB，一個(gè)域名下總共可以保存1024KB的文件，文件個(gè)數(shù)應(yīng)該沒(méi)有限制。在受限站點(diǎn)里這兩個(gè)值分別是64KB和640KB，所以如果考慮到各種情況的話(huà)，單個(gè)文件最好能控制64KB以下。web存儲(chǔ)發(fā)展史FlashSharedObject：使用kissy的store模塊來(lái)調(diào)用FlashSharedObject。FlashSharedObject的優(yōu)點(diǎn)是容量適中，基本上不存在兼容性問(wèn)題，缺點(diǎn)是要在頁(yè)面引入特定的swf和js文件，增加額外負(fù)擔(dān)，處理繁瑣；還是有部分機(jī)子沒(méi)有flash運(yùn)行環(huán)境。web存儲(chǔ)發(fā)展史GoogleGears：

Google的離線(xiàn)方案，已經(jīng)停止更新，官方推薦使用html5的localStorage方案。Gears是一個(gè)通過(guò)插件技術(shù)來(lái)增強(qiáng)瀏覽器功能的開(kāi)源項(xiàng)目。Gears提供了一套API來(lái)訪問(wèn)一個(gè)基于SQLite的嵌入式SQL數(shù)據(jù)庫(kù)，在獲得用戶(hù)的一次性授權(quán)后，應(yīng)用程序可以通過(guò)Gears存儲(chǔ)不限數(shù)量的本地?cái)?shù)據(jù)。

localStorage：相對(duì)于上述本地存儲(chǔ)方案，localStorage有自身的優(yōu)點(diǎn)：容量大、易用、強(qiáng)大、原生支持；缺點(diǎn)是兼容性差（chrome、safari、firefox、IE9、IE8都支持localStorage，主要是IE8以下版本不支持）、它保存的數(shù)據(jù)并不進(jìn)行加密，所以雖然webstorage功能很強(qiáng)大，但也不宜保存比較敏感的數(shù)據(jù)html5的web存儲(chǔ)機(jī)制HTML5提供了兩種在客戶(hù)端存儲(chǔ)數(shù)據(jù)的新方法localStorage-沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)sessionStorage-針對(duì)一個(gè)session的數(shù)據(jù)存儲(chǔ)注：localStorage和sessionStorage的方、屬性和使用都一樣，只是有使用時(shí)間這一點(diǎn)不同html5的web存儲(chǔ)機(jī)制sessionStorage:是針對(duì)用戶(hù)執(zhí)行單個(gè)事務(wù)的方案而設(shè)計(jì)的，僅在單個(gè)頁(yè)面（標(biāo)簽或者窗口）會(huì)話(huà)范圍內(nèi)是有效的。所以當(dāng)頁(yè)面session失效時(shí)，數(shù)據(jù)也會(huì)刪除；localStorage:是跨多個(gè)窗口，且持續(xù)范圍可超過(guò)當(dāng)前會(huì)話(huà)；意味著當(dāng)瀏覽器關(guān)閉再重新打開(kāi)，數(shù)據(jù)依然是可用的；

這兩種類(lèi)型的對(duì)象，在不同的瀏覽器之間訪問(wèn)數(shù)據(jù)是無(wú)效的；例如，我們?cè)贔irefox中創(chuàng)建localStorage,要在IE中去訪問(wèn)，是訪問(wèn)不到數(shù)據(jù)的html5的web存儲(chǔ)機(jī)制html5WebStorage非常易于Web開(kāi)發(fā)者使用，他提供了非常簡(jiǎn)單的獲取或設(shè)置key-value對(duì)的API；支持的數(shù)據(jù)大小由網(wǎng)頁(yè)瀏覽器廠商來(lái)決定，大多數(shù)支持都是5M或10M以上；這就意味著，我們可以在客戶(hù)端存儲(chǔ)更多有關(guān)用戶(hù)及會(huì)話(huà)的信息，諸如用戶(hù)個(gè)人設(shè)置、本地化數(shù)據(jù)、離線(xiàn)數(shù)據(jù)等；WebStorage存儲(chǔ)的數(shù)據(jù)可能用javascript來(lái)進(jìn)行訪問(wèn)；LocalStorage本地存儲(chǔ)說(shuō)到本地存儲(chǔ)，這玩意真是歷盡千辛萬(wàn)苦才走到HTML5這一步，之前的歷史大概如下圖所示：Cookie的概念與分類(lèi)Cookie（復(fù)數(shù)形態(tài)Cookies），中文名稱(chēng)為小型文本文件或小甜餅[1]，指某些網(wǎng)站為了辨別用戶(hù)身份而儲(chǔ)存在用戶(hù)本地終端（ClientSide）上的數(shù)據(jù)（通常經(jīng)過(guò)加密）。定義于RFC2109。為網(wǎng)景公司的前雇員LouMontulli在1993年3月所發(fā)明。Cookie總是保存在客戶(hù)端中，按在客戶(hù)端中的存儲(chǔ)位置，可分為內(nèi)存Cookie和硬盤(pán)Cookie。Cookie的用途因?yàn)镠TTP協(xié)議是無(wú)狀態(tài)的，即服務(wù)器不知道用戶(hù)上一次做了什么，這嚴(yán)重阻礙了交互式WEB應(yīng)用的實(shí)現(xiàn)。在典型的網(wǎng)上購(gòu)物場(chǎng)景中，用戶(hù)瀏覽了幾個(gè)頁(yè)面，買(mǎi)了一盒餅干和兩瓶飲料。最后結(jié)帳時(shí)，由于HTTP的無(wú)狀態(tài)性，不通過(guò)額外的手段，服務(wù)器并不知道用戶(hù)到底買(mǎi)了什么。所以Cookie就是用來(lái)繞開(kāi)HTTP的無(wú)狀態(tài)性的“額外手段”之一。服務(wù)器可以設(shè)置或讀取Cookies中包含信息，借此維護(hù)用戶(hù)跟服務(wù)器會(huì)話(huà)中的狀態(tài)。Cookie的用途在剛才的購(gòu)物場(chǎng)景中，當(dāng)用戶(hù)選購(gòu)第一項(xiàng)商品，服務(wù)器在向用戶(hù)發(fā)送網(wǎng)頁(yè)的同時(shí)，還發(fā)送了一段Cookie，記錄著那項(xiàng)商品的信息。當(dāng)用戶(hù)訪問(wèn)另一個(gè)頁(yè)面，瀏覽器會(huì)把Cookie發(fā)送給服務(wù)器，于是服務(wù)器知道他之前選購(gòu)了什么。用戶(hù)繼續(xù)選購(gòu)飲料，服務(wù)器就在原來(lái)那段Cookie里追加新的商品信息。結(jié)帳時(shí)，服務(wù)器讀取發(fā)送來(lái)的Cookie就行了。Cookie的用途Cookie另一個(gè)典型的應(yīng)用是當(dāng)?shù)卿浺粋€(gè)網(wǎng)站時(shí)，網(wǎng)站往往會(huì)請(qǐng)求用戶(hù)輸入用戶(hù)名和密碼，并且用戶(hù)可以勾選“下次自動(dòng)登錄”。如果勾選了，那么下次訪問(wèn)同一網(wǎng)站時(shí)，用戶(hù)會(huì)發(fā)現(xiàn)沒(méi)輸入用戶(hù)名和密碼就已經(jīng)登錄了。這正是因?yàn)榍耙淮蔚卿洉r(shí)，服務(wù)器發(fā)送了包含登錄憑據(jù)（用戶(hù)名加密碼的某種加密形式）的Cookie到用戶(hù)的硬盤(pán)上。第二次登錄時(shí)，（如果該Cookie尚未到期）瀏覽器會(huì)發(fā)送該Cookie，服務(wù)器驗(yàn)證憑據(jù)，于是不必輸入用戶(hù)名和密碼就讓用戶(hù)登錄了。Cookie的缺陷cookie會(huì)被附加在每個(gè)HTTP請(qǐng)求中，所以無(wú)形中增加了流量。由于在HTTP請(qǐng)求中的cookie是明文傳遞，所以安全性成問(wèn)題。（除非用HTTPS)Cookie的大小限制在4KB左右。對(duì)于復(fù)雜的存儲(chǔ)需求來(lái)說(shuō)是不夠用的。檢測(cè)瀏覽器支持本地存儲(chǔ)首先自然是檢測(cè)瀏覽器是否支持本地存儲(chǔ)。在HTML5中，本地存儲(chǔ)是一個(gè)window的屬性，包括localStorage和sessionStorage，從名字應(yīng)該可以清楚的辨認(rèn)二者的區(qū)別，前者是一直存在本地的，后者只是伴隨著session，窗口一旦關(guān)閉就沒(méi)了。二者用法完全相同，這里以localStorage為例。if(window.localStorage){

alert('This

browser

supports

localStorage');

}else{

alert('This

browser

does

NOT

support

localStorage');

}存儲(chǔ)數(shù)據(jù)存儲(chǔ)數(shù)據(jù)的方法就是直接給window.localStorage添加一個(gè)屬性，例如：window.localStorage.a

或者

window.localStorage["a"]。它的讀取、寫(xiě)、刪除操作方法很簡(jiǎn)單，是以鍵值對(duì)的方式存在的，如下：localStorage.a

=

3;//設(shè)置a為"3"

localStorage["a"]

=

"sfsf";//設(shè)置a為"sfsf"，覆蓋上面的值

localStorage.setItem("b","isaac");//設(shè)置b為"isaac"

var

a1

=

localStorage["a"];//獲取a的值

var

a2

=

localStorage.a;//獲取a的值

var

b

=

localStorage.getItem("b");//獲取b的值

localStorage.removeItem("c");//清除c的值存儲(chǔ)數(shù)據(jù)這里最推薦使用的自然是getItem()和setItem()，清除鍵值對(duì)使用removeItem()。如果希望一次性清除所有的鍵值對(duì)，可以使用clear()。另外，HTML5還提供了一個(gè)key()方法，可以在不知道有哪些鍵值的時(shí)候使用，如下：var

storage

=

window.localStorage;

function

showStorage(){

for(var

i=0;i<storage.length;i++){

//key(i)獲得相應(yīng)的鍵，再用getItem()方法獲得對(duì)應(yīng)的值

document.write(storage.key(i)+

"

:

"

+

storage.getItem(storage.key(i))

+

"<br>");

}

}WebStorage屬性方法WebStorage屬性方法setItem存儲(chǔ)value用途：將value存儲(chǔ)到key字段用法：.setItem(key,value)代碼示例： sessionStorage.setItem("key","value"); localStorage.setItem("site","js8.in");getItem獲取value用途：獲取指定key本地存儲(chǔ)的值用法：.getItem(key)代碼示例：

varvalue=sessionStorage.getItem("key"); varsite=localStorage.getItem("site");WebStorage屬性方法removeItem刪除key用途：刪除指定key本地存儲(chǔ)的值用法：.removeItem(key)代碼示例： sessionStorage.removeItem("key"); localStorage.removeItem("site");clear清除所有的key/value用途：清除所有的key/value用法：.clear()代碼示例： sessionStorage.clear(); localStorage.clear();WebStorage屬性方法sessionStorage和localStorage提供的key()和length可以方便的實(shí)現(xiàn)存儲(chǔ)的數(shù)據(jù)遍歷代碼示例： varstorage=window.localStorage; for(vari=0,len=storage.length;i<len;i++){ varkey=storage.key(i); varvalue=storage.getItem(key); console.log(key+"="+value); }WebStorage事件WebStorage事件所有支持localStorage對(duì)象的瀏覽器都支持存儲(chǔ)事件，也包括IE8。不過(guò)由于IE8不支持W3C標(biāo)準(zhǔn)的addEventListener（IE9支持）。因此要在不同瀏覽器中偵聽(tīng)存儲(chǔ)事件，仍需要兼顧瀏覽器事件處理機(jī)制的不同。

if(window.addEventListener){ window.addEventListener("storage",handle_storage,false); }else{ window.attachEvent("onstorage",handle_storage); };上面代碼中handle_storage是在存儲(chǔ)事件發(fā)生時(shí)被調(diào)用的回調(diào)函數(shù)，傳入?yún)?shù)是StorageEvent。在IE中，該event對(duì)象會(huì)被保存在window.event中

functionhandle_storage(e){ if(!e){e=window.event;} }WebStorage使用測(cè)試瀏覽器是否支持localStorage

functionsupports_html5_storage(){ try{ return'localStorage'inwindow&&window['localStorage']!==null; } catch(e){ returnfalse; } }WebStorage使用HTML5存儲(chǔ)是基于鍵值對(duì)的。數(shù)據(jù)存儲(chǔ)在一個(gè)鍵里，訪問(wèn)數(shù)據(jù)時(shí)可以根據(jù)同樣的鍵獲得上次存儲(chǔ)的數(shù)據(jù).鍵是一個(gè)字符串.而數(shù)據(jù)則可以是任何類(lèi)型的JavaScript基本數(shù)據(jù)類(lèi)型，包括字符串，Boolean，整數(shù)，和浮點(diǎn)數(shù).不過(guò)需要注意的是，這些數(shù)據(jù)在存儲(chǔ)時(shí)實(shí)際上是以字符串保存的。因此在訪問(wèn)數(shù)據(jù)時(shí)你需要利用parseInt()或parseFloat()方法來(lái)做數(shù)據(jù)類(lèi)型的轉(zhuǎn)換WebStorage使用如果在調(diào)用setItem時(shí)使用一個(gè)已經(jīng)存在的鍵，將會(huì)直接覆蓋掉該鍵上保存的值。而調(diào)用getItem時(shí)傳入一個(gè)不存在的鍵，則會(huì)返回一個(gè)null，不會(huì)拋出異常。像其他JavaScript對(duì)象一樣，你也可以將localStorage對(duì)象當(dāng)成是關(guān)聯(lián)數(shù)組使用(associativemap)

除了使用getItem和setItem之外，可以使用中括號(hào)的方式來(lái)引用數(shù)據(jù).例如如果removeItem傳入一個(gè)不存在的key則無(wú)操作，也不會(huì)有異常Web離線(xiàn)版本的實(shí)現(xiàn)HTML5引入應(yīng)用程序緩存，這意味著web應(yīng)用可進(jìn)行緩存，并可在沒(méi)有因特網(wǎng)連接時(shí)進(jìn)行訪問(wèn)使用HTML5，通過(guò)創(chuàng)建cachemanifest文件，可以輕松地創(chuàng)建web應(yīng)用的離線(xiàn)版本應(yīng)用程序緩存為應(yīng)用帶來(lái)三個(gè)優(yōu)勢(shì)：離線(xiàn)瀏覽--用戶(hù)可在應(yīng)用離線(xiàn)時(shí)使用它們速度--已緩存資源加載得更快減少服務(wù)器負(fù)載--瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源所有主流瀏覽器均支持應(yīng)用程序緩存，除了IECacheManifest基礎(chǔ)如需啟用應(yīng)用程序緩存，請(qǐng)?jiān)谖臋n的<html>標(biāo)簽中包含manifest屬性每個(gè)指定manifest的頁(yè)面在用戶(hù)對(duì)其訪問(wèn)時(shí)都會(huì)被緩存。如果未指定manifest屬性，則頁(yè)面不會(huì)被緩存（除非在manifest文件中直接指定了該頁(yè)面）manifest文件的建議的文件擴(kuò)展名是：".appcache"。manifest文件需要配置正確的MIME-type，即"text/cache-manifest"。必須在web服務(wù)器上進(jìn)行配置。CacheManifest基礎(chǔ)manifest文件是簡(jiǎn)單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）manifest文件可分為三個(gè)部分：CACHEMANIFEST

-在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存NETWORK

-在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存FALLBACK

-在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)面（比如404頁(yè)面）CacheManifest基礎(chǔ)CACHEMANIFEST

第一行，CACHEMANIFEST，是必需的：

上面的manifest文件列出了三個(gè)資源：一個(gè)CSS文件，一個(gè)GIF圖像，以及一個(gè)JavaScript文件。當(dāng)manifest文件加載后，瀏覽器會(huì)從網(wǎng)站的根目錄下載這三個(gè)文件。然后，無(wú)論用戶(hù)何時(shí)與因特網(wǎng)斷開(kāi)連接，這些資源依然是可用的。CacheManifest基礎(chǔ)NETWORK

NETWORK小節(jié)規(guī)定文件“l(fā)ogin.asp”永遠(yuǎn)不會(huì)被緩存，且離線(xiàn)時(shí)是不可用的，可以使用星號(hào)來(lái)指示所有其他資源/文件都需要因特網(wǎng)連接：

CacheManifest基礎(chǔ)FALLBACK FALLBACK小節(jié)規(guī)定如果無(wú)法建立因特網(wǎng)連接，則用“offline.html”替代/html5/目錄中的所有文件。說(shuō)明：第一個(gè)URI是資源，第二個(gè)是替補(bǔ)

更新緩存更新緩存一旦應(yīng)用被緩存，它就會(huì)保持緩存直到發(fā)生下列情況：用戶(hù)清空瀏覽器緩存manifest文件被修改：例如編輯了一幅圖片，或者修改了一個(gè)JavaScript函數(shù)，這些改變都不會(huì)被重新緩存由程序來(lái)更新應(yīng)用緩存一旦文件被緩存，則瀏覽器會(huì)繼續(xù)展示已緩存的版本，即使修改了服務(wù)器上的文件。為了確保瀏覽器更新緩存，需要更新manifest文件更新緩存更新緩存

以"#"開(kāi)頭的是注釋行，但也可滿(mǎn)足其他用途。更新注釋行中的日期和版本號(hào)是一種使瀏覽器重新緩存文件的辦法。Web存儲(chǔ)案例應(yīng)用HTML5Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用localStorage（本地存儲(chǔ)）,可以長(zhǎng)期存儲(chǔ)數(shù)據(jù)，沒(méi)有時(shí)間限制，一天，一年，兩年甚至更長(zhǎng)，數(shù)據(jù)都可以使用sessionStorage（會(huì)話(huà)存儲(chǔ)），只有在瀏覽器被關(guān)閉之前使用，創(chuàng)建另一個(gè)頁(yè)面時(shí)同意可以使用，關(guān)閉瀏覽器之后數(shù)據(jù)就會(huì)消失Web存儲(chǔ)案例應(yīng)用代碼代碼如下:<htmlxmlns=""><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><styletype="text/css">#t0{width:320px;}textarea{width:300px;height:300px;}.button{width:100px;}Web存儲(chǔ)案例應(yīng)用</style></head><body><scripttype="text/javascript">//使用HTML5Web存儲(chǔ)的localStorage和sessionStorage方式進(jìn)行Web頁(yè)面數(shù)據(jù)本地存儲(chǔ)。//頁(yè)面參考如后面效果圖，能將頁(yè)面上的數(shù)據(jù)進(jìn)行本地存儲(chǔ)。并能讀取存儲(chǔ)的數(shù)據(jù)顯示在頁(yè)面上。functionsaveSession(){vart1=document.getElementById("t1");vart2=document.getElementById("t2");varmydata=t2.value;varoStorage=window.sessionStorage;Web存儲(chǔ)案例應(yīng)用oStorage.mydata=mydata;t1.value+="sessionStorage保存mydata:"+mydata+"\n";}functionreadSession(){vart1=document.getElementById("t1");varoStorage=window.sessionStorage;varmydata="不存在";if(oStorage.mydata){mydata=oStorage.mydata;}t1.value+="sessionStorage讀取mydata:"+mydata+"\n";}Web存儲(chǔ)案例應(yīng)用functioncleanSession(){vart1=document.getElementById("t1");varoStorage=window.sessionStorage;varmydata="不存在";if(oStorage.mydata){mydata=oStorage.mydata;}oStorage.removeItem("mydata");t1.value+="sessionStorage清除mydata:"+mydata+"\n";}functionsaveStorage(){vart1=document.getElementById("t1");vart2=document.getElementById("t2");Web存儲(chǔ)案例應(yīng)用varmydata=t2.value;varoStorage=window.localStorage;oStorage.mydata=mydata;t1.value+="localStorage保存mydata:"+mydata+"\n";}functionreadStorage(){vart1=document.getElementById("t1");varoStorage=window.localStorage;varmydata="不存在";if(oStorage.mydata){mydata=oStorage.mydata;}t1.value+="localStorage讀取mydata:"+mydata+"\n";}Web存儲(chǔ)案例應(yīng)用functioncleanStorage(){vart1=document.getElementById("t1");varoStorage=wi