前端開發(fā)lec7 web存儲

Web存儲

版本管理修改記錄

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

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

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

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

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

alert('This

browser

supports

localStorage');

}else{

alert('This

browser

does

NOT

support

localStorage');

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

或者

window.localStorage["a"]。它的讀取、寫、刪除操作方法很簡單，是以鍵值對的方式存在的，如下：localStorage.a

=

3;//設置a為"3"

localStorage["a"]

=

"sfsf";//設置a為"sfsf"，覆蓋上面的值

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

var

a1

=

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

var

a2

=

localStorage.a;//獲取a的值

var

b

=

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

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

storage

=

window.localStorage;

function

showStorage(){

for(var

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

//key(i)獲得相應的鍵，再用getItem()方法獲得對應的值

document.write(storage.key(i)+

"

:

"

+

storage.getItem(storage.key(i))

+

"<br>");

}

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

varvalue=sessionStorage.getItem("key"); varsite=localStorage.getItem("site");WebStorage屬性方法removeItem刪除key用途：刪除指定key本地存儲的值用法：.removeItem(key)代碼示例： sessionStorage.removeItem("key"); localStorage.removeItem("site");clear清除所有的key/value用途：清除所有的key/value用法：.clear()代碼示例： sessionStorage.clear(); localStorage.clear();WebStorage屬性方法sessionStorage和localStorage提供的key()和length可以方便的實現(xiàn)存儲的數(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對象的瀏覽器都支持存儲事件，也包括IE8。不過由于IE8不支持W3C標準的addEventListener（IE9支持）。因此要在不同瀏覽器中偵聽存儲事件，仍需要兼顧瀏覽器事件處理機制的不同。

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

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

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

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

-在此標題下列出的文件將在首次下載后進行緩存NETWORK

-在此標題下列出的文件需要與服務器的連接，且不會被緩存FALLBACK

-在此標題下列出的文件規(guī)定當頁面無法訪問時的回退頁面（比如404頁面）CacheManifest基礎CACHEMANIFEST

第一行，CACHEMANIFEST，是必需的：

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

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

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

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

以"#"開頭的是注釋行，但也可滿足其他用途。更新注釋行中的日期和版本號是一種使瀏覽器重新緩存文件的辦法。Web存儲案例應用HTML5Web存儲方式的localStorage和sessionStorage進行數(shù)據(jù)本地存儲案例應用localStorage（本地存儲）,可以長期存儲數(shù)據(jù)，沒有時間限制，一天，一年，兩年甚至更長，數(shù)據(jù)都可以使用sessionStorage（會話存儲），只有在瀏覽器被關閉之前使用，創(chuàng)建另一個頁面時同意可以使用，關閉瀏覽器之后數(shù)據(jù)就會消失Web存儲案例應用代碼代碼如下:<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存儲案例應用</style></head><body><scripttype="text/javascript">//使用HTML5Web存儲的localStorage和sessionStorage方式進行Web頁面數(shù)據(jù)本地存儲。//頁面參考如后面效果圖，能將頁面上的數(shù)據(jù)進行本地存儲。并能讀取存儲的數(shù)據(jù)顯示在頁面上。functionsaveSession(){vart1=document.getElementById("t1");vart2=document.getElementById("t2");varmydata=t2.value;varoStorage=window.sessionStorage;Web存儲案例應用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存儲案例應用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存儲案例應用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存儲案例應用functioncleanStorage(){vart1=document.getElementById("t1");varoStorage=wi