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