【正文】 單的內(nèi)容具體說明如下。 manifest文件第一行必須是CACHE MANIFEST，文件擴展名建議使用appcache，也可以使用manifest。 CACHE：指定需要緩存的文件，清單中列出的文件在首次訪問Web服務器進下載并緩存。 NETWORK：指定的文件需要與服務器連接才能獲取，不會被緩存。 *是文件通配符，代表除了在CACHE中指明的文外件，所有其他文件都不緩存，需要從Web服務器獲得。 FALLBACK：在此選項下列出的文件當頁面無法訪問時，使用備用的資源文件。 文件編碼必須是utf8。實現(xiàn)應用緩存，需要在html標記中定義manifest屬性，從而在網(wǎng)頁中引用manifest文件，例如：html manifest= 在訪問網(wǎng)頁時，按照test. appcache文件中指定的文件列表進行緩存。在一些Web服務器上可能需要配置對manifest文件的支持，保存后需要重新啟動Web服務器。具體請參閱相應的Web服務器手冊。（4）Web Storage API中的localStorage和sessionStorage區(qū)別是什么？Web Storage提供兩種方式將數(shù)據(jù)保存在客戶端：一種是localStorage，另一種是sessionStorage。從兩種存儲方式的名字可以看出，localStorage被稱做本地存儲，將數(shù)據(jù)保存在客戶端本地；sessionStorage被稱為會話存儲，將數(shù)據(jù)保存在session中，瀏覽器關閉后session對象消失。兩者的主要差異在于數(shù)據(jù)的保存周期和有效范圍，如下所示。Web Storage類型數(shù)據(jù)保存周期有效范圍localStorage數(shù)據(jù)保存在本地存儲（硬盤），網(wǎng)頁關閉后，數(shù)據(jù)仍然存在，執(zhí)行刪除命令后數(shù)據(jù)會消失。同一網(wǎng)站的網(wǎng)頁可以訪問sessionStorage數(shù)據(jù)臨時保存在session對象中，在網(wǎng)頁瀏覽期間存續(xù)，網(wǎng)頁關閉，數(shù)據(jù)丟失僅對當前瀏網(wǎng)頁可以訪問（5）Web Storage API有哪些常用方法，功能是什么？sessionStorage和localStorage可使用的API都相同，其功能包括保存數(shù)據(jù)、讀取數(shù)據(jù)、刪除數(shù)據(jù)、得到索引的key值等。localStorage 和sessionStoragey都使用setItem()方法用來保存數(shù)據(jù)，格式如下：(key, value)localStorage和sessionStoragey都使用getItem()方法用來讀取數(shù)據(jù)，格式如下：var value = (key)。刪除數(shù)單個數(shù)據(jù)需要指明刪除的key值，形式如下。如果key參數(shù)沒有對應數(shù)據(jù)，則不執(zhí)行任何操作。(key)。 是遍歷Storage對象時，需要使用key(index)方法允許獲取一個指定位置的鍵值。語法格式(index)。 2．操作題（1）參考示例95使用localStorage實現(xiàn)一個計數(shù)器功能，先在同一瀏覽器的不同頁面訪問，再在不同瀏覽器的頁面訪問，觀察頁面顯示結(jié)果。!DOCTYPE HTMLhtmlheadmeta charset=utf8titlelocalStorage文檔/title/headbody h3Session計數(shù)器/h3 div id=content/div p hr/ script language=javascript if(!localStorage [counter]){ localStorage [counter]=0。 } else { localStorage [counter]++。 } (content).innerHTML=刷新次數(shù) +(counter)。 /script/body/html（2）構(gòu)建一個包含圖片、音頻、文字和樣式的離線Web應用，并在Chrome瀏覽器中進行測試，觀察Web緩存的文件。（3）參考使用localStorage實現(xiàn)的電話簿程序，使用localStorage創(chuàng)建一個留言本，實現(xiàn)增加、查找和顯示功能，如圖97所示。!DOCTYPE HTMLhtmlheadmeta charset=utf8titlelocalStorage文檔/title/headbody h3Session計數(shù)器/h3 div id=content/div p hr/ script language=javascript if(!localStorage [counter]){ localStorage [counter]=0。 } else { localStorage [counter]++。 } (content).innerHTML=刷新次數(shù) +(counter)。 /script/body/html//function saveStorage(id){ var data = (id).value。 var time = new Date().getTime()。 //alert(time)。 (time,data)。 alert(數(shù)據(jù)已保存。)。 loadStorage(39。msg39。)。}function loadStorage(id){ var result = 39。table border=139。 for(var i = 0。i 。i++) { var key = (i)。 //alert(key)。 var value = (key)。 var date= new Date()。 (key)。 var datestr = ()。 result += 39。trtd39。 + value + 39。/tdtd39。 + datestr + 39。/td/tr39。 } result += 39。/table39。 var target = (id)。 = result。}function clearStorage(){ ()。 alert(全部數(shù)據(jù)被清除。)。 loadStorage(39。msg39。)。}第十章1．簡答題（1）Web Workers API中常用的方法和事件有哪些？各自功能是什么？Web Workers作為一種后臺執(zhí)行的線程，它的功能包括創(chuàng)建線程，線程與前端頁面的數(shù)據(jù)交互，線程本身占用大量內(nèi)存資源，本身也需要關閉或銷毀。HTML5的Web Workers API中的方法和事件就是對上面的功能進行了封裝。使用Web Workers API，用戶可以很容易地創(chuàng)建在后臺運行的線程(Worker)，并完成數(shù)據(jù)交互和終止線程。Web Workers常用的方法和事件下表所示。方法/事件功能Worker()方法構(gòu)造器，用于創(chuàng)建線程postMessage()方法用于發(fā)送信息terminate()方法終止線程，并釋放瀏覽器/計算機資源close()方法結(jié)束線程setTimeout()方法在線程中實現(xiàn)定時處理setInterval ()方法在線程中實現(xiàn)定時處理onmessage事件獲得接收消息的事件句柄（2）實現(xiàn)前臺頁面與后臺線程互相傳遞數(shù)據(jù)有哪幾種方法？請寫出代碼。通過發(fā)送和接收消息來實現(xiàn)前面頁面與后臺線程互相傳遞數(shù)據(jù)。如果想接收消息，用下面方式之一。第1種方法，通過獲取Worker對象的onmessage事件的句柄可以在后臺線程中接收消息，代碼如下。方法的回調(diào)函數(shù)的參數(shù)（下面代碼中的event）中，有線程交互的數(shù)據(jù)。=function(event) { //消息處理，} 第2種方法，使用addEventListener()方法對message事件進行監(jiān)聽。(message,function(event) { //(‘message’).innerHTML=。 //消息處理，},false)。如果想要發(fā)送消息， 需要使用postMessage()方法。使用Worker對象的postMessag()方法來發(fā)送消息，代碼如下。發(fā)送的消息是文本數(shù)據(jù)，也可以是JSON。(message)。 （3）SharedWorker和Worker有什么區(qū)別？HTML5 中的 Web Worker分為兩種不同線程類型，一種稱為專用線程（Dedicated Worker），另外一種就是共享線程 Shared Worker。SharedWorker也是Worker，但多個頁面可以共用一個SharedWorker后臺線程，并且可通過該后臺線程共享數(shù)據(jù)。創(chuàng)建SharedWorker線程的方法與前面創(chuàng)建Worker線程的方法類似，只是構(gòu)造器略有區(qū)別。代碼如下。var worker=new SharedWorker(url, [name])。 該方法第一個參數(shù)用于指定后臺線程文件的URL地址，該腳本文件中定義了在后臺線程中所要執(zhí)行的處理，第二個參數(shù)為可選參數(shù)，用于指定Worker的名稱。當用戶創(chuàng)建多個SharedWorker對象時，腳本程序?qū)⒏鶕?jù)創(chuàng)建SharedWorker對象時使用的url參數(shù)值與name參數(shù)值來決定是否創(chuàng)建不同的線程。2．操作題（1）使用Web Worker設計多線程的網(wǎng)頁頁面，前臺向后臺線程發(fā)送10個0~200的隨機數(shù)；后臺線程接收數(shù)據(jù)后，選出其中5的倍數(shù)，并將數(shù)據(jù)發(fā)送至前端頁面；由前端頁面在一個span元素中顯示。!DOCTYPE HTMLhtmlheadmeta charset=utf8title頁面與線程數(shù)據(jù)交互/title/headbody h2從隨機生成的數(shù)字中抽取5N/h2 hr table id=mytable /table 生成的隨機數(shù)是： span id=source1/span p 后臺線程計算的結(jié)果是： span id=result/span script type=text/javascript var intArray = new Array(10)。 var intStr=。 for (var i = 0。i10。i++) { intArray[i]=((()*200))。 if (i!=0) intStr+=。 intStr+=intArray[i]。 } //alert(intStr)。 (source1).innerHTML=intStr。 var myWorker=new Worker()。 (intStr)。 = function(myevent) { //alert(0)。 //alert()。 (result).innerHTML=。 }。/script /body/html// JavaScript Document，onmessage = function(myevent) { var result1=。 var intStr=。 var intArray=(。)。 for (var i=0。i。i++) { if (intArray[i]%5==0) { if (result1!=) result1+=。 result1+=intArray[i]。 } } postMessage(result1)。 }（2）使用SharedWorker設計多線程的網(wǎng)頁頁面，前臺頁面向后臺線程發(fā)送一個字符串；后臺線程接收數(shù)據(jù)后，在指定的字符串數(shù)組內(nèi)進行查找，將查找結(jié)果發(fā)送至前臺頁面。!DOCTYPE htmlhtmlhead lang=en meta charset=UTF8 script var worker = new SharedWorker()。 = function(e) { (result).innerHTML= 。 }。 function processing() { var searchWord = (search1).value。 ()。 (searchWord)。 } /script/headbody h1Result/h1 請輸入查詢詞：input type=text id=search1 name=search1 width=10 button onclick=processing