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