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

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