HTML5的數(shù)據(jù)存儲(chǔ).ppt

,本章要求：,第7章HTML5的數(shù)據(jù)存儲(chǔ),WebStorage的基本概念sessionStorage和localStorage兩者之間的區(qū)別sessionStorage和localStorage的使用方法使用sessionStorage和localStorage進(jìn)行復(fù)雜數(shù)據(jù)的存儲(chǔ)sessionStorage和localStorage進(jìn)行JavaScript對(duì)象的存儲(chǔ)使用transactoin方法進(jìn)行事務(wù)的處理,主要內(nèi)容,1.WebStorage2.WebSQL數(shù)據(jù)庫(kù)3.跨文檔消息通信4.綜合實(shí)例簡(jiǎn)單的Web留言本,第7章HTML5的數(shù)據(jù)存儲(chǔ),7.1WebStorage,7.1.1WebStorage簡(jiǎn)介7.1.2WebStorage的API7.1.3兩種不同存儲(chǔ)類(lèi)型的實(shí)例計(jì)數(shù)器7.1.4JSON對(duì)象的存數(shù)實(shí)例用戶(hù)信息卡,在HTML5中，除了Canvas元素之外，另一個(gè)新增的非常重要的功能是可以在客戶(hù)端本地保存數(shù)據(jù)的WebStorage功能。Web應(yīng)用的發(fā)展，使得客戶(hù)端存儲(chǔ)使用得也越來(lái)越多，而實(shí)現(xiàn)客戶(hù)端存儲(chǔ)的方式則是多種多樣。最簡(jiǎn)單而且兼容性最佳的方案是Cookie，但是作為真正的客戶(hù)端存儲(chǔ)，cookie還是有些不足：大?。篶ookies的大小被限制在4KB。帶寬：cookies是隨HTTP事物一起發(fā)送的，因此會(huì)浪費(fèi)一部分發(fā)送cookies時(shí)使用的帶寬。復(fù)雜性：cookies操作起來(lái)比較麻煩；所有的信息要被拼到一個(gè)長(zhǎng)字符串里面。對(duì)cookies來(lái)說(shuō)，在相同的站點(diǎn)與多事務(wù)處理保持聯(lián)系不是很容易。在這種情況下，在HTML5中重新提供了一種在客戶(hù)端本地保存數(shù)據(jù)的功能，它就是WebStorage功能。WebStorage功能，顧名思義，就是在Web上存儲(chǔ)數(shù)據(jù)的功能，而這里的存儲(chǔ)，是針對(duì)客戶(hù)端本地而言的。它包含兩種不同的存儲(chǔ)類(lèi)型：SessionStorage和LocalStorage。不管是SessionStorage還是LocalStorage，它們都能支持在同域下存儲(chǔ)5MB數(shù)據(jù)，這相比cookies有著明顯的優(yōu)勢(shì)。sessionStorage將數(shù)據(jù)保存在session對(duì)象中。所謂session，是指用戶(hù)在瀏覽某個(gè)網(wǎng)站時(shí)，從進(jìn)入網(wǎng)站到瀏覽器關(guān)閉所經(jīng)過(guò)的這段時(shí)間，也就是用戶(hù)瀏覽這個(gè)網(wǎng)站所花費(fèi)的時(shí)間。Session對(duì)象可以用來(lái)保存在這段時(shí)間內(nèi)所要求保存在任何數(shù)據(jù)。localStorage將數(shù)據(jù)保存在客戶(hù)端本地的硬件設(shè)備中，即使瀏覽器被關(guān)閉了，該數(shù)據(jù)仍然存在，下次打開(kāi)瀏覽器訪(fǎng)問(wèn)網(wǎng)站時(shí)仍然可以繼續(xù)使用。這兩種不同的存儲(chǔ)類(lèi)型區(qū)別在于，sessionStorage為臨時(shí)保存，而localStorage為永久保存。,7.1.1WebStorage簡(jiǎn)介,下面講解如何使用WebStorage的API，目前WebStorage的API有如下這些：Length：獲得當(dāng)前webstorage中的數(shù)目。key(n)：返回webstorage中的第N個(gè)存儲(chǔ)條目。getItem(key)：返回指定key的存儲(chǔ)內(nèi)容，如果不存在則返回null。注意，返回的類(lèi)型是String字符串類(lèi)型。setItem(key,value)：設(shè)置指定key的內(nèi)容的值為value。removeItem(key)：根據(jù)指定的key，刪除鍵值為key的內(nèi)容。clear：清空webstorate的內(nèi)容?？梢钥吹?，webstorageAPI的操作機(jī)制實(shí)際上是對(duì)鍵值對(duì)進(jìn)行的操作。下面是一些相關(guān)的應(yīng)用：1數(shù)據(jù)的存儲(chǔ)與獲取在localStorage中設(shè)置鍵值對(duì)數(shù)據(jù)可以應(yīng)用setItem()，代碼如下：localStorage.setItem(key,value);獲取數(shù)據(jù)可以應(yīng)用getItem()，代碼如下;varval=localStorage.getItem(key);當(dāng)然也可以直接使用localStorage的key方法，而不使用setItem和getItem方法，如下：localStorage.key=value;varval=localStorage.key;,7.1.2WebStorage的API,HTML5存儲(chǔ)是基于鍵值對(duì)（key/value）的形式存儲(chǔ)的，每個(gè)鍵值對(duì)稱(chēng)為一個(gè)項(xiàng)（item）。存儲(chǔ)和檢索數(shù)據(jù)都是通過(guò)指定的鍵名，鍵名的類(lèi)型是字符串類(lèi)型。值可以是包括字符串、布爾值、整數(shù)，或者浮點(diǎn)數(shù)在內(nèi)的任意JavaScript支持的類(lèi)型。但是，最終數(shù)據(jù)是以字符串類(lèi)型存儲(chǔ)的。調(diào)用結(jié)果是將字符串value設(shè)置到sessionStorage中，這些數(shù)據(jù)隨后可以通過(guò)鍵key獲取。調(diào)用setItem()時(shí)，如果指定的鍵名已經(jīng)存在，那么新傳入的數(shù)據(jù)會(huì)覆蓋原先的數(shù)據(jù)。調(diào)用getItem()時(shí)，如果傳入的鍵名不存在，那么會(huì)返回null，而不會(huì)拋出異常。,2數(shù)據(jù)的刪除和清空removeItem()用于從Storage列表刪除數(shù)據(jù)代碼如下：varval=sessionStorage.removeItem(key);也可以通過(guò)傳入數(shù)據(jù)項(xiàng)的key從而刪除對(duì)應(yīng)的存儲(chǔ)數(shù)據(jù)代碼如下：varval=sessionStorage.removeItem(1);說(shuō)明：數(shù)字1會(huì)被轉(zhuǎn)換為string，因?yàn)閗ey的類(lèi)型就是字符串。clear()方法用于清空整個(gè)列表的所有數(shù)據(jù)，代碼如下：sessionStorage.clear();同時(shí)可以通過(guò)使用length屬性獲取Storage中存儲(chǔ)的鍵值對(duì)的個(gè)數(shù)：varval=sessionStorage.length;注意：removeItem可以清除給定的key所對(duì)應(yīng)的項(xiàng)，如果key不存在則“什么都不做”；clear會(huì)清除所有的項(xiàng)，如果列表本來(lái)就是空的就“什么都不做”。,【例7-1】本節(jié)通過(guò)一個(gè)實(shí)例來(lái)具體看一下sessionStorage和localStorage的區(qū)別。本例主要是通過(guò)sessionStorage和localStorage對(duì)頁(yè)面的訪(fǎng)問(wèn)量進(jìn)行計(jì)數(shù)。當(dāng)在文本框內(nèi)輸入數(shù)據(jù)后，分別可以單擊“session保存”按鈕和“l(fā)ocal保存”按鈕對(duì)數(shù)據(jù)進(jìn)行保存，還可以通過(guò)“session讀取”按鈕和“l(fā)ocal讀取”按鈕對(duì)數(shù)據(jù)進(jìn)行讀取。但是兩種方法對(duì)數(shù)據(jù)的處理方式不一樣，使用sessionStorage方法時(shí)，如果關(guān)閉了瀏覽器，這個(gè)數(shù)據(jù)就丟失了下一次打開(kāi)瀏覽器，點(diǎn)擊讀取數(shù)據(jù)按鈕時(shí)，讀取不到任何數(shù)據(jù)。使用localStorage方法時(shí)，即使瀏覽器關(guān)閉了，下次打開(kāi)瀏覽器時(shí)仍然能夠讀取保存的數(shù)據(jù)。但是，數(shù)據(jù)保存是按不同的瀏覽器分別進(jìn)行的，也就是說(shuō)，如果打開(kāi)別的瀏覽器，是讀取不到在這個(gè)瀏覽器中保存的數(shù)據(jù)的。實(shí)現(xiàn)本例的具體步驟如下：（1）首先，需要準(zhǔn)備一個(gè)用來(lái)保存數(shù)據(jù)的網(wǎng)頁(yè)。在本例網(wǎng)頁(yè)中，在頁(yè)面上放置的控件如表所示7-1所示。表7-1WebStorage示例的頁(yè)面中元素,7.1.3兩種不同存儲(chǔ)類(lèi)型的實(shí)例計(jì)數(shù)器,該實(shí)例的HTML頁(yè)面代碼如下。要保存的數(shù)據(jù)：session計(jì)數(shù)：local計(jì)數(shù)：,（2）在javascript腳本中分別使用了sessionStorage和localStorage兩種方法。這兩種方法都是當(dāng)用戶(hù)在input文本框中輸入內(nèi)容時(shí)“session保存”按鈕和“l(fā)ocal保存”按鈕對(duì)數(shù)據(jù)進(jìn)行保存，通過(guò)“session讀取”按鈕和“l(fā)ocal讀取”按鈕對(duì)數(shù)據(jù)進(jìn)行讀取。實(shí)現(xiàn)的代碼如下。functiongetE(ele)/自定義一個(gè)getE()函數(shù)/返回并調(diào)用document對(duì)象的getElementById方法輸出變量returndocument.getElementById(ele);vartext_1=getE(text-1),/聲明變量并為其賦值mag=getE(msg_1),btn_1=getE(btn-1),btn_2=getE(btn-2),btn_3=getE(btn-3),btn_4=getE(btn-4);btn_1.onclick=saveSessionStorage;btn_2.onclick=loadSessionStorage;btn_3.onclick=saveLocalStorage;btn_4.onclick=loadLocalStorage;functionsaveSessionStorage()sessionStorage.setItem(msg,text_1.value+session);functionloadSessionStorage()mag.innerHTML=sessionStorage.getItem(msg);functionsaveLocalStorage()localStorage.setItem(msg,text_1.value+local);functionloadLocalStorage()mag.innerHTML=localStorage.getItem(msg);,（3）最后，通過(guò)三元運(yùn)算符來(lái)定義記錄頁(yè)面的次數(shù)，然后通過(guò)setItem方法對(duì)數(shù)據(jù)進(jìn)行保存，代碼如下。varlocal_count=localStorage.getItem(a_count)?localStorage.getItem(a_count):0;getE(local_count).innerHTML=local_count;localStorage.setItem(a_count,+local_count+1);varsession_count=sessionStorage.getItem(a_count)?sessionStorage.getItem(a_count):0;getE(session_count).innerHTML=session_count;sessionStorage.setItem(a_count,+session_count+1);,本例在Opera10瀏覽器中的運(yùn)行結(jié)果如圖7-1所示。圖7-1Opera10瀏覽器中的WebStorage示例,雖然HTML5WebStorage規(guī)范允許將任意類(lèi)型的對(duì)象保存為鍵值對(duì)形式，實(shí)際情況卻是一些瀏覽器將數(shù)據(jù)限定為文本字符串類(lèi)型。不過(guò)，既然現(xiàn)代瀏覽器原生支持JSON，這就解決了這個(gè)問(wèn)題。JSON格式是JavascriptObjectNotation的縮寫(xiě)，是將Javascript中的對(duì)象作為文本形式來(lái)保存時(shí)使用的一種格式。JSON是一種將對(duì)象與字符串可以相互表示的數(shù)據(jù)轉(zhuǎn)換標(biāo)準(zhǔn)。JSON一直是通過(guò)HTTP將對(duì)象從瀏覽器傳送到服務(wù)器一種常用格式。現(xiàn)在，可以通過(guò)序列化復(fù)雜對(duì)象將JSON數(shù)據(jù)保存在Storage中，以實(shí)現(xiàn)復(fù)雜數(shù)據(jù)類(lèi)型的持久化。,7.1.4JSON對(duì)象的存數(shù)實(shí)例用戶(hù)信息卡,【例7-2】該實(shí)例中，將用戶(hù)的信息使用JSON格式進(jìn)行保存。使用JSON的格式作為文本保存來(lái)保存對(duì)象，獲取該對(duì)象時(shí)再通過(guò)JSON格式來(lái)獲取，可以保存和讀取具有復(fù)雜結(jié)構(gòu)的數(shù)據(jù)。本例實(shí)現(xiàn)的具體過(guò)程如下。（1）編寫(xiě)顯示頁(yè)面用的HTML代碼部分。在該頁(yè)面中，除了輸入數(shù)據(jù)用的文本框與顯示數(shù)據(jù)用的p元素之外，還放置了“保存”與“按姓名查詢(xún)”按鈕，點(diǎn)擊“保存按鈕”來(lái)保存數(shù)據(jù)，點(diǎn)擊“按姓名查詢(xún)”按鈕來(lái)查詢(xún)用戶(hù)信息，實(shí)現(xiàn)的代碼如下。姓名:EMAIL:電話(huà)號(hào)碼:備注:查詢(xún)：:,（2）在HTML頁(yè)面中調(diào)用saveStorage函數(shù)來(lái)對(duì)數(shù)據(jù)實(shí)現(xiàn)保存，在這個(gè)函數(shù)中首先從各輸入文本框中獲取數(shù)據(jù)，然后創(chuàng)建對(duì)象，將獲取的數(shù)據(jù)作為對(duì)象的屬性進(jìn)行保存。為了將數(shù)據(jù)保存在一個(gè)對(duì)象中，使用newObject語(yǔ)句創(chuàng)建了一個(gè)對(duì)象，將各種數(shù)據(jù)保存在該對(duì)象的各個(gè)屬性中，為了將對(duì)象轉(zhuǎn)換成JSON格式的文本數(shù)據(jù)，使用了JSON對(duì)象的stringify方法。該方法的使用方法如下。varstr=JSON.stringify(data);該方法接受一個(gè)參數(shù)data，該參數(shù)表示要轉(zhuǎn)換成JSON格式文本數(shù)據(jù)的對(duì)象。這個(gè)方法的作用是將對(duì)象轉(zhuǎn)換成JSON格式的文本數(shù)據(jù)，并將其返回。最后將文本數(shù)據(jù)保存在localStorage中，實(shí)現(xiàn)的代碼如下。functionsaveStorage()vardata=newObject;=document.getElementById(name).value;data.email=document.getElementById(email).value;data.tel=document.getElementById(tel).value;data.memo=document.getElementById(memo).value;varstr=JSON.stringify(data);localStorage.setItem(,str);alert(數(shù)據(jù)已保存。);,（3）在HTML頁(yè)面中調(diào)用findStorage函數(shù)，對(duì)數(shù)據(jù)進(jìn)行查詢(xún)。在該函數(shù)中，首先從localStorage中，將查詢(xún)用的姓名作為鍵值，獲取對(duì)應(yīng)的數(shù)據(jù)。將獲取的數(shù)據(jù)轉(zhuǎn)換成JSON對(duì)象。該函數(shù)的關(guān)鍵是使用JSON對(duì)象的parse方法，將從localStorage中獲取的數(shù)據(jù)轉(zhuǎn)換成JSON對(duì)象。該方法的使用方法如下。vardata=JSON.parse(str);該方法接受一個(gè)參數(shù)str，此參數(shù)表示從localStorage中取得的數(shù)據(jù)，該方法的作用是將傳入的數(shù)據(jù)轉(zhuǎn)換為JSON對(duì)象，并且將該對(duì)象返回。在取得JSON對(duì)象的各個(gè)屬性值之后，創(chuàng)建要輸出的內(nèi)容，最后將要輸出的內(nèi)容在頁(yè)面上輸出。實(shí)現(xiàn)的代碼如下。functionfindStorage(id)varfind=document.getElementById(find).value;varstr=localStorage.getItem(find);vardata=JSON.parse(str);varresult=姓名:++;result+=EMAIL:+data.email+;result+=電話(huà)號(hào)碼:+data.tel+;result+=備注:+data.memo+;vartarget=document.getElementById(id);target.innerHTML=result;,用戶(hù)信息卡分為姓名、E-mail地址、電話(huà)號(hào)碼、說(shuō)明這幾列，把它們保存在localStorage中。在查詢(xún)中以用戶(hù)的姓名進(jìn)行檢索，可以獲取這個(gè)用戶(hù)的所有聯(lián)系信息。用戶(hù)信息卡的運(yùn)行效果如下7-2所示。圖7-2使用JSON對(duì)象實(shí)現(xiàn)的用戶(hù)信息卡,7.2WebSQL數(shù)據(jù)庫(kù),7.2.1WebSQL數(shù)據(jù)庫(kù)簡(jiǎn)介7.2.2WebSQLDatabaseAPI的使用,在HTML5中，大大豐富了客戶(hù)端本地可以存儲(chǔ)的內(nèi)容，添加了很多功能來(lái)將原本必須要保存在服務(wù)器上的數(shù)據(jù)轉(zhuǎn)為保存在客戶(hù)端本地，從而大大提高了Web應(yīng)用程序的性能，減輕了服務(wù)器端的負(fù)擔(dān)。在這其中，一項(xiàng)非常重要的功能就是數(shù)據(jù)庫(kù)的本地存儲(chǔ)功能。在HTML5中內(nèi)置了一個(gè)可以通過(guò)SQL語(yǔ)言來(lái)訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)。在HTML4中，數(shù)據(jù)庫(kù)只能放在服務(wù)器端，只能通過(guò)服務(wù)器來(lái)訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)，但是在HTML5中，可以就像訪(fǎng)問(wèn)本地文件那樣輕松地對(duì)內(nèi)置數(shù)據(jù)庫(kù)進(jìn)行直接訪(fǎng)問(wèn)了。現(xiàn)在，像這種不需要存儲(chǔ)在服務(wù)器上的，被稱(chēng)為“SQLite”的文件型SQL數(shù)據(jù)庫(kù)已經(jīng)得到了很廣泛的利用，所以HTML5中也采用了這種數(shù)據(jù)庫(kù)來(lái)作為本地?cái)?shù)據(jù)庫(kù)。因此，如果先掌握了SQLite數(shù)據(jù)庫(kù)的基本知識(shí)的話(huà)，接著再學(xué)如何使用HTML5的數(shù)據(jù)庫(kù)也就不是很難了。,7.2.1WebSQL數(shù)據(jù)庫(kù)簡(jiǎn)介,典型的數(shù)據(jù)庫(kù)API的用法，涉及打開(kāi)數(shù)據(jù)庫(kù)，然后執(zhí)行一些SQL。但是需要注意的是如果使用服務(wù)器端的一個(gè)數(shù)據(jù)庫(kù)的話(huà)，通常還要關(guān)閉數(shù)據(jù)庫(kù)連接。1打開(kāi)和創(chuàng)建數(shù)據(jù)庫(kù)通過(guò)初次打開(kāi)一個(gè)數(shù)據(jù)庫(kù)，就會(huì)創(chuàng)建數(shù)據(jù)庫(kù)。在任何時(shí)間，在該域上只能擁有指定數(shù)據(jù)庫(kù)的一個(gè)版本，因此如果你創(chuàng)建了版本1.0，那么應(yīng)用程序在沒(méi)有特定地改變數(shù)據(jù)庫(kù)的版本時(shí)，將無(wú)法打開(kāi)1.1。打開(kāi)和創(chuàng)建數(shù)據(jù)庫(kù)必須使用openDatabase方法來(lái)創(chuàng)建一個(gè)訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)的對(duì)象。該方法的使用方法如下。vardb=openDatabase(db,1.0,firstdatabase,2*1024*1024);該方法使用四個(gè)參數(shù)，第一個(gè)參數(shù)為數(shù)據(jù)庫(kù)名，第二個(gè)參數(shù)為版本號(hào)，第三個(gè)參數(shù)為數(shù)據(jù)庫(kù)的描述，第四個(gè)參數(shù)為數(shù)據(jù)庫(kù)的大小。該方法返回創(chuàng)建后的數(shù)據(jù)庫(kù)訪(fǎng)問(wèn)對(duì)象，如果該數(shù)據(jù)庫(kù)不存在，則創(chuàng)建該數(shù)據(jù)庫(kù)。為了確保應(yīng)用程序有效，并且檢測(cè)對(duì)WebSQL數(shù)據(jù)庫(kù)API的支持，還應(yīng)該測(cè)試瀏覽器對(duì)數(shù)據(jù)庫(kù)的支持，所以要進(jìn)行測(cè)試，測(cè)試代碼如下。vardb;if(window.openDatabase)db=openDatabase(mydb,1.0,Myfirstdatabase,2*1024*1024);,7.2.2WebSQLDatabaseAPI的使用,2創(chuàng)建數(shù)據(jù)表實(shí)際訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)的時(shí)候，還需要使用transaction方法，用來(lái)執(zhí)行事務(wù)處理。使用事務(wù)處理，可以防止在對(duì)數(shù)據(jù)庫(kù)進(jìn)行訪(fǎng)問(wèn)及執(zhí)行有關(guān)操作的時(shí)候受到外界的打擾。因?yàn)樵赪eb上，同時(shí)會(huì)有許多人都在對(duì)頁(yè)面進(jìn)行訪(fǎng)問(wèn)。如果在訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)的過(guò)程中，正在操作的數(shù)據(jù)被別的用戶(hù)給修改掉得話(huà)，會(huì)引起很多意想不到的后果。因此，可以使用事務(wù)來(lái)達(dá)到在操作完了之前，阻止別的用戶(hù)訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)的目的。transaction方法的使用方法如下。db.transaction(function(tx)tx.executeSql(CREATETABLEtweets(id,date,tweet););transaction方法使用一個(gè)回調(diào)函數(shù)為參數(shù)。在這個(gè)函數(shù)中，執(zhí)行訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)的語(yǔ)句。要?jiǎng)?chuàng)建數(shù)據(jù)表（以及數(shù)據(jù)庫(kù)上的任何其他事務(wù)），必須啟動(dòng)一個(gè)數(shù)據(jù)庫(kù)“事務(wù)”，并且在回調(diào)中創(chuàng)建該表。事務(wù)回調(diào)接受一個(gè)參數(shù)，其中包含了事務(wù)對(duì)象，這就是允許運(yùn)行SQL語(yǔ)句并且運(yùn)行executeSql方法（在下面的例子中，就是tx）的內(nèi)容。這通過(guò)使用從openDatabase返回的數(shù)據(jù)庫(kù)對(duì)象來(lái)完成，并且像下面這種調(diào)用事物的方法如下。vardb;if(window.openDatabase)db=openDatabase(mydb,1.0,Myfirstdatabase,2*1024*1024);db.transaction(function(tx)tx.executeSql(CREATETABLEtweets(id,date,tweet););,3插入和查詢(xún)數(shù)據(jù)接下來(lái)，我們來(lái)看一下在transaction的回調(diào)函數(shù)內(nèi)，到底是怎樣訪(fǎng)問(wèn)數(shù)據(jù)庫(kù)的。這里，使用了作為參數(shù)傳遞給回調(diào)函數(shù)的transaction對(duì)象的executeSql方法。executeSql方法的完整定義如下。transaction.executeSql(sqlquery,dataHandler,errorHandler);該方法使用四個(gè)參數(shù)，第一個(gè)參數(shù)為需要執(zhí)行的SQL語(yǔ)句。第二個(gè)參數(shù)為SQL語(yǔ)句中所有使用到的參數(shù)的數(shù)組。在executeSql方法中，將SQL語(yǔ)句中所要使用到的參數(shù)先用“？”代替，然后依次將這些參數(shù)組成數(shù)組放在第二個(gè)參數(shù)中，如下。transaction.executeSql(UPDATEusersetage=?wherename=?;,age,name);第三個(gè)參數(shù)為執(zhí)行sql語(yǔ)句成功時(shí)調(diào)用的回調(diào)函數(shù)。該回調(diào)函數(shù)的傳遞方法如下。functiondataHandler(transaction,results)/執(zhí)行SQL語(yǔ)句成功時(shí)的處理；該回調(diào)函數(shù)使用兩個(gè)參數(shù)，第一個(gè)參數(shù)為transaction對(duì)象，第二個(gè)參數(shù)為執(zhí)行查詢(xún)操作時(shí)返回的查詢(xún)到的結(jié)果數(shù)據(jù)集對(duì)象。第四個(gè)參數(shù)為執(zhí)行SQL語(yǔ)句出錯(cuò)時(shí)調(diào)用的回調(diào)函數(shù)。該回調(diào)函數(shù)的傳遞方法如下。functionerrorHandler(transaction,errmsg)/執(zhí)行SQL語(yǔ)句出錯(cuò)時(shí)的處理；該回調(diào)函數(shù)使用兩個(gè)參數(shù)，第一個(gè)參數(shù)為transaction對(duì)象，第二個(gè)參數(shù)為執(zhí)行發(fā)生錯(cuò)誤時(shí)的錯(cuò)誤信息文字。下面我們來(lái)看一下，當(dāng)執(zhí)行查詢(xún)操作時(shí)，如何從查詢(xún)到的結(jié)果數(shù)據(jù)集中，依次把數(shù)據(jù)取出到頁(yè)面上來(lái)，最簡(jiǎn)單的方法是使用for語(yǔ)句循環(huán)。結(jié)果數(shù)據(jù)集對(duì)象有一個(gè)rows屬性，其中保存了查詢(xún)到的每條記錄，記錄的條數(shù)可以用rows.length來(lái)獲取。可以用for循環(huán)，用rowindex或rows.Item（index）的形式來(lái)依次取出每條數(shù)據(jù)。在JavaScript腳本中，一般采用rowindex的形式。這里需要注意的是在googleChrome5瀏覽器中，不支持rows.Item（index）的形式。,7.3跨文檔消息通信,7.3.1postMessageAPI的使用7.3.2跨文檔消息傳輸,首先，要想接受從其他的窗口那里發(fā)過(guò)來(lái)的信息，就必須對(duì)窗口對(duì)象的message時(shí)間進(jìn)行監(jiān)視，代碼如下。window.addEventListener(message,function().,false);使用window對(duì)象的postMessage方法向其他窗口發(fā)送信息，該方法的定義如下。otherWindow.postMessage(message,targetOrigin);該方法使用兩個(gè)參數(shù)；第一個(gè)參數(shù)為所發(fā)送的消息文本，但也可以是任何javascript對(duì)象（通過(guò)JSON轉(zhuǎn)換對(duì)象為文本）；第二個(gè)參數(shù)為接收信息的對(duì)象窗口的URL地址（例如http:/localhost:8080/）?？梢栽赨RL地址字符串中使用通配符“*”指定全部地址，不過(guò)，建議使用準(zhǔn)確的URL地址。otherWindow為要發(fā)送窗口對(duì)象的引用，可以通過(guò)window.open返回該對(duì)象，或通過(guò)對(duì)window.iframes數(shù)組指定序號(hào)（index）或名字的方式來(lái)返回單個(gè)iframe所屬的窗口對(duì)象。,7.3.1postMessageAPI的使用,【例7-3】為了讓讀者更好的理解跨文檔消息傳輸，下面編寫(xiě)一個(gè)實(shí)例，實(shí)現(xiàn)主頁(yè)面與子頁(yè)面中框架之間的相互通信。其基本思路是：首先，創(chuàng)建主頁(yè)面向iframe子頁(yè)面發(fā)送消息，iframe子頁(yè)面接受消息，顯示在本頁(yè)面中，然后向主頁(yè)面返回消息。最后，主頁(yè)面接受并輸出消息注意：要完成這個(gè)示例，必須先建立兩個(gè)虛擬的網(wǎng)站，將主頁(yè)面與子頁(yè)面分別放置于不同的網(wǎng)站中，才能夠達(dá)到跨域通信的效果。,7.3.2跨文檔消息傳輸,這里介紹一種在Apache服務(wù)器下創(chuàng)建虛擬主機(jī)的方法，并且將主頁(yè)面和子頁(yè)面分別存儲(chǔ)于這兩個(gè)虛擬主機(jī)下，以此完成跨域通信的示例。（1）安裝配置Apache服務(wù)器（建議采用AppServ集成化安裝包來(lái)搭建一個(gè)PHP的開(kāi)發(fā)環(huán)境，通過(guò)其中的Apache服務(wù)器來(lái)測(cè)試我們的程序）。（2）定位到Apache2.2confhttpd.conf文件，打開(kāi)該文件，并在其最后的位置，添加如下內(nèi)容，完成虛擬主機(jī)的配置。其代碼如下：ServerAdminanyDocumentRootF:wampwebpagecxkfzykhtmlServerName9ErrorLoglogs/-error.logCustomLoglogs/-access.logcommon第一行，定義虛擬服務(wù)器的標(biāo)簽，指定端口號(hào)；第二行，指定一個(gè)郵箱地址，可以隨意指定；第三行，定義要訪(fǎng)問(wèn)的項(xiàng)目在Apache服務(wù)器中的具體路徑；第四行，指定服務(wù)器的訪(fǎng)問(wèn)名稱(chēng)，即與項(xiàng)目綁定的域名；第五、六行，定義Apache中日志文件的存儲(chǔ)位置。第七行，定義虛擬服務(wù)器的結(jié)束標(biāo)簽。上述七行代碼即完成一個(gè)虛擬服務(wù)器的配置操作，如果存在多個(gè)域名，并且需要綁定Apache服務(wù)器下的多個(gè)項(xiàng)目，那么就以此類(lèi)推，重復(fù)上述操作，為每個(gè)域名綁定不同的項(xiàng)目文件即可。即修改DocumentRoot和ServerName指定的值。,（3）在完成虛擬主機(jī)的配置之后，需要保存httpd.conf文件，重新啟動(dòng)Apache服務(wù)器。（4）然后，編寫(xiě)示例內(nèi)容，首先創(chuàng)建一個(gè)index.html文件，其代碼如下：跨域通信示例/監(jiān)聽(tīng)message事件window.addEventListener(message,function(ev)/忽略指定URL地址之外的頁(yè)面?zhèn)鬟^(guò)來(lái)的消息if(ev.origin!=89)return;/顯示消息alert(從+ev.origin+那里傳過(guò)來(lái)的消息:n+ev.data+);,false);functionhello()variframe=window.frames0;/傳遞消息iframe.postMessage(“您好！”,“89”);跨域通信示例將其存儲(chǔ)于服務(wù)器的訪(fǎng)問(wèn)名稱(chēng)為9的虛擬主機(jī)下，具體位置由DocumentRoot的值決定。,（5）在IP為89的主機(jī)下，重新創(chuàng)建一個(gè)虛擬主機(jī)，設(shè)置其服務(wù)器訪(fǎng)問(wèn)地址為89，將子頁(yè)面2.html存儲(chǔ)于該服務(wù)器指定的位置。2.html的完整代碼如下：window.addEventListener(message,function(ev)if(ev.origin!=9)return;document.body.innerHTML=從+ev.origin+那里傳來(lái)的消息。+ev.data+;/向主頁(yè)面發(fā)送消息ev.source.postMessage(明日科技?xì)g迎您！這里是+this.location,ev.origin);,false);,至此，已經(jīng)完成虛擬主機(jī)的配置和跨域通信示例內(nèi)容的創(chuàng)建，下面則可以通過(guò)指定的瀏覽器訪(fǎng)問(wèn)主頁(yè)面（9/），其運(yùn)行效果如圖7-3所示。圖7-3跨域通信實(shí)例,7.4綜合實(shí)例簡(jiǎn)單的Web留言本,本實(shí)例將使用HTML5存儲(chǔ)技術(shù)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Web留言本，具體實(shí)現(xiàn)時(shí)，使用一個(gè)多行文本框輸入數(shù)據(jù)，單擊按鈕時(shí)，將文本框中的數(shù)據(jù)保存到localStorage中，然后在表單下部放置一個(gè)P元素來(lái)顯示保存后的數(shù)據(jù)。程序在Opera10瀏覽器中的運(yùn)行結(jié)果如圖7-4所示。圖7-4簡(jiǎn)單的Web留言本,程序開(kāi)發(fā)步驟如下：（1）首先，編寫(xiě)顯示頁(yè)面用的HTML代碼部分。在該頁(yè)面中，除了輸入數(shù)據(jù)用的文本框與顯示數(shù)據(jù)用的p元素之外，還放置了“添加按鈕”與“全部清除”按鈕，點(diǎn)擊“添加按鈕”來(lái)保存數(shù)據(jù)，點(diǎn)擊“全部清除”按鈕來(lái)消除全部數(shù)據(jù)，實(shí)現(xiàn)的代碼如下。簡(jiǎn)單Web留言本（2）接下來(lái)在javascript腳本中，編寫(xiě)點(diǎn)擊“添加”按鈕時(shí)調(diào)用的saveStorage函數(shù)，在這個(gè)函數(shù)中使用“newDate().getTime()”語(yǔ)句得到了當(dāng)前的日期和時(shí)間戳，然后調(diào)用localStorage.setItem方法，將得到的時(shí)間戳作為鍵值，并將文本框中的數(shù)據(jù)作為鍵名進(jìn)行保存。保存完畢后，重新調(diào)用腳本中的loadStorage函