【正文】 ， HTML5 中所提供的離線資源緩存與瀏覽器中常規(guī)的緩存機制是完全不同的，瀏覽器中常規(guī)的緩存機制通常只緩存那些已被以前訪問過的網(wǎng)頁和資源，而 HTML5 中所提供的離線資源緩存不僅允許開發(fā)人員指定所要緩存的頁面和資源文件，也可以緩存那些從未訪問過的資源文件。楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 1/19 頁 1 目錄 跟我學(xué) Html5 相關(guān)技術(shù) —— HTML5 脫機應(yīng)用技術(shù)及實例 ................................. 2 HTML5 脫機（離線， Offline Storage）概述 .................................................. 2 Cache Manifest 文件及資源緩存示例 ............................................................... 4 離線應(yīng)用示例 .................................................................................................... 12 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 2/19 頁 2 跟我學(xué) Html5 相關(guān)技術(shù) —— HTML5 脫機應(yīng)用技術(shù)及實例 HTML5 脫機（離線， Offline Storage） 概述 HTML5 提供了脫機應(yīng)用程序方面的支持 所謂的“脫機應(yīng)用程序”也稱為“可離線訪問 程序”或者“可離線瀏覽的程序”，離線訪問對基于網(wǎng)絡(luò)的應(yīng)用而言越來越重要。 （ 2） HTML5 是如何實現(xiàn)對脫機應(yīng)用程序的支持 在 HTML5 中，主要是通過在“ Cache Manifest”文件中指明需要緩存的資源文件名稱—— 如果該文件不存在，整個緩存效果就無法實現(xiàn)，頁面也不能實現(xiàn)離線緩存；而且支持自動和手動兩種緩存更新 方式。 （ 2）在線狀態(tài)檢測 Web 應(yīng)用系統(tǒng)需要知道瀏覽器目前 是否在線，這樣才能夠區(qū)分當(dāng)前是否處于在線或離線狀況，并分別做出對應(yīng)的處理。聲明白名單使用 NETWORK：標(biāo)識符，用于指定不需要被緩存的各個資源文楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 4/19 頁 4 件 —— 它們必須要在連機狀態(tài)下從服務(wù)器端獲得，而不適用于離線狀態(tài)下被訪問； 4) 如果在白名單后還要補充需要緩存的資源，可以使用 CACHE：標(biāo)識符；在所聲明的 CACHE 后面可以羅列出系統(tǒng)中需要離線緩存的各個資源文件。 CACHE: style/ FALLBACK: /files/projects / （ 3）所應(yīng)該要注意的問題 在“ Cache Manifest”文件 的 CACHE、 FALLBACK 和 NETWORK 等標(biāo)志是沒有先后順序的，而且在同一個“ Cache Manifest”文件中可以多次出現(xiàn) 。 為了能夠使得該 Web 應(yīng)用在離線狀況下也能夠被訪問，開發(fā)者必須在 Web 應(yīng)用中創(chuàng)建一個“ Cache Manifest”文件，在該文件中指明需要緩存的資源文件名稱。但是，擁有這樣的信息很關(guān)鍵，因為可以使用該信息來告知瀏覽器您的應(yīng)用程序有一個新版本。修改后的 頁面的標(biāo)簽代碼如下： !DOCTYPE HTML html manifest= head titleClock/title 也可以指定相對的文件目錄 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 7/19 頁 7 link rel=stylesheet href= /head body pThe time is: output id=clock/output/p /body /html 當(dāng)用戶在線訪問“ ”時，瀏覽器會緩存“ ”頁面本身以及與它相關(guān)的其它資源文件 —— “ ”和“ ”等文件；而當(dāng)用戶離線訪問時，這個 Web 應(yīng)用也同樣可以正常使用了。 如果系統(tǒng)管理人員對服務(wù)器擁有控制權(quán)且正在使用一個 J2EE 應(yīng)用程序服務(wù)器，只需要在 Web 應(yīng)用程序的 文件中配置這個 MIME 類型參數(shù)。其中的 status 有五種無符號的短整型值的狀態(tài)： 1) UNCACHED = 0，此時 applicationCache 對象的緩存宿主與應(yīng)用緩存無關(guān)聯(lián)； 2) IDLE = 1，應(yīng)用緩存已經(jīng)是最新的，并且沒有標(biāo)記為 obsolet； 3) CHECKING = 2， applicationCache 對象的緩存宿主已經(jīng)和一個應(yīng)用緩存關(guān)聯(lián)，并且該緩存的更新狀態(tài)是 checkin； 4) DOWNLOADING = 3， applicationCache 對象的緩存宿主已經(jīng)和一個應(yīng)用緩存關(guān)聯(lián)，并且該緩存的更新狀態(tài)是 downloadin； 5) UPDATEREADY = 4， applicationCache 對象的緩存宿主已經(jīng)和一個應(yīng)用緩存關(guān)聯(lián)，并且該緩存的更新狀態(tài)是 idle，并且沒有標(biāo)記為 obsolete，但是緩存不是最新的； 6) OBSOLETE = 5， applicationCache 對象的緩存宿主已經(jīng)和一個應(yīng)用緩存關(guān)聯(lián)，并且該緩存的更新狀態(tài)是 obsolete。error39。 （ 2）如何定義 updateready 事件 當(dāng) Web 頁面加載時，可以為 對象添加一個 updateready 事件，用于監(jiān)測本地緩存是否發(fā)生改變。 }, false)。 當(dāng)然， Web 應(yīng)用系統(tǒng)在離線狀態(tài)執(zhí)行時，需要把操作者所產(chǎn)生的各種數(shù)據(jù)都存儲在客戶的本地磁盤中。因此，應(yīng)用 online/offline 事件的觸發(fā)機制，可以在網(wǎng)絡(luò)狀態(tài)發(fā)生變化時立刻得到通知。 Cache Manifest 文件 定義“ Cache Manifest”文件以聲明需要緩存的資源文件，本示例需要緩存“ ”、“ ”、“ ”和“ ”等 4 個文件。 7) remove 函數(shù)分別調(diào)用 removeUIItem 和 removeDataItem 刪除頁面元素和數(shù)，removeDataItem 函數(shù)的代碼將在后面列出。 // 從數(shù)據(jù)中刪除 } function addUIItem(title){ var item = (li)。 for (var i = 0。 removeServerItem 將在后面列出。localStorage39。 } else{ // 離線狀態(tài) var str = (toRemove)。 for(i = 0。 i++) { removeDataItem(removeItems[i])。 i。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 19/19 頁 19