【正文】 離線應用示例 下面通過一個示例來說明如何使用 HTML5 開發(fā)離線應用的基本方法，本示例會應用到前面所提到的離線資源緩存、在線狀態(tài)檢測和本地存儲等方面的功能。而無序列表初始為空，它是用來顯示便簽的列表。 2) newNote 函數(shù)會彈出對話框，用戶輸入新便簽內容。 5) “刪除便簽”的主要流程如下： 6) 用戶雙擊某便簽時，調用 remove 函數(shù)。 if (title){ add(title)。 // 從界面中刪除 removeDataItem(title)。))。 } 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 15/19 頁 15 function removeUIItem(title){ var list = (list)。 } } } 數(shù)據(jù)存儲代碼 數(shù)據(jù)存儲代碼定義在 中， 中的代碼包含添加便簽、刪除便簽和與服務器同步等數(shù) 據(jù)操作。 2) “刪除便簽” removeDataItem 函數(shù)的執(zhí)行流程： 3) 通過 判斷是否在線，如果在線，那么調用 removeServerItem 直接在服務器上刪除數(shù)據(jù)。其功能如下： 6) 如果 表示當前離 線，則不做任何操作；如果在線，將把 localStorage對象中的名稱為 toAdd 的屬性數(shù)據(jù)項中的所有數(shù)據(jù)添加到服務器上，并刪除 toAdd的屬性數(shù)據(jù)項。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 16/19 頁 16 var storage = window[39。 } else{ // 離線狀態(tài) var str = (toAdd)。 } } function removeDataItem(title){ if () { // 在線狀態(tài) removeServerItem(title)。 } (toRemove, str)。 if(str != null){ var addItems = (,)。 } (toAdd)。 i。 while( != ) ()。 for(i = 0。 （ 5） 中的相關代碼 function addServerItem(title){ //在服務器中添加一項 } function removeServerItem(title){ // 在服務器中刪除一項 } function getServerItems() { // 返回服務器中存儲的便簽列表 } 由于這部分代碼與服務器有關，這里只說明各個函數(shù)的功能，具體實現(xiàn)可以根據(jù)不同服務器編寫代碼。在此頁面中可以了解到多少磁盤空間的離線存儲，并可以清除所有數(shù)據(jù)。 刪除脫機緩存文件 對于脫機狀態(tài)下所緩 存的各個資源文件，也可以將它們刪除掉。 i++) { addUIItem(items[i])。 // 從服務器獲取全部便簽，并顯示在界面中 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 18/19 頁 18 var allItems = getServerItems()。 } (toRemove)。 if(str != null){ var removeItems = (,)。 i。 } var i = 0。 if(str == null){ str = title。 } else{ str = str + , + title。]。 8) 刪除當前頁面列表中的所有便簽，并調用 getServerItems()函數(shù)實現(xiàn)從服務器端獲取所有的便簽，并添加在頁面的相關列表中。 4) 如果離線，那么把數(shù)據(jù)添加到 localStorage 的“ toRemove”項中。 “添加便簽” addDataItem 函數(shù)的執(zhí)行流程： 1) 通過 判斷是否在線，如果在線，那么調用 addServerItem()函數(shù)直接把數(shù)據(jù)存儲到服務器上。 i 。 var list = (list)。 (ondblclick, remove(39。 // 在界面中添加 addDataItem(title)。 8) removeUIItem 函數(shù)刪除頁面列表中的相應項。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 14/19 頁 14 3) add 函數(shù)分別調用 addUIItem 和 addDataItem 添加頁面元素和數(shù)據(jù)， addDataItem 代碼將在后面列出。其中 、 和 等三個文件分別包含服務器相關、數(shù)據(jù)存儲和用戶界面代碼。 應用程序頁面 這個程序的界 面很簡單，用戶點擊“增加信息”按鈕可以在彈出框中創(chuàng)建新的便簽，雙擊某便簽就表示刪除它。 當在線 /離線狀態(tài)切換時， online/offline 事件將觸發(fā)在 body標簽元素上，并且會沿著、 document 和 window 的順序冒泡。因為當網(wǎng)絡狀態(tài)發(fā)生變化時， 屬性的值也會隨之變化。當系統(tǒng) 處于在線狀態(tài)以后，系統(tǒng)再把數(shù)據(jù)同步上傳到服務器中。 } } else { /* 不需要重新加載更新后的版本時，則直接退出 */ } } 由于更新后的版本不會立即被使用，為了使得用戶能夠即刻使用更新后的新版本而不需 要 強 制 用 戶 重 載 更 新 后 的 頁 面 ， 可 以 在 JS 程 序 中 調 用()函數(shù)從而達到重新加載更新后的 Web 頁面。 function updateCurrentWebPage (e) { if ( == ) { /* 瀏覽器更新緩存成功后，提示用戶需要重新加載更新后的頁面以應用最新版本 */ if (confirm(39。, function(e) { (39。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 11/19 頁 11 即使完成了本地緩存的更新，當前頁面也不會發(fā)生任何變化，需要重新打開該頁面或刷新當前頁，才能執(zhí)行本地緩存更新后的頁面效果。 } 不管是 manifest 文件還是它所羅列的資源文件下載失敗，整個更新過程就終止了，瀏覽器會使用上一個最新的緩存。, handleCacheError, false)。從而可以實現(xiàn)對更新過程進行監(jiān)控和處理各種異常、提示等待狀態(tài)等行為以提高用戶的體驗。 但 update()函數(shù)會調用當前應用資源下載的過程，可能會出現(xiàn)重復下載資源文 件。 （ 2）手動更新 開發(fā)者可以使用 的接口更新緩存，此時需要檢測其中的一 個status 屬性的值 （ ），如果其值是 UPDATEREADY，那么可以調用 ()函數(shù)更新緩存。 ?xml version= encoding=utf8? webapp xmlns:xs