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