通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5脫機(jī)應(yīng)用技術(shù)及實(shí)例-資料下載頁(yè)
2024-11-08 20:20本頁(yè)面
【導(dǎo)讀】訪問對(duì)基于網(wǎng)絡(luò)的應(yīng)用而言越來越重要。目前所有的主流的瀏覽器都有緩存機(jī)制，但它們。在實(shí)際應(yīng)用中表現(xiàn)出很不可靠，也不一定總能起到預(yù)期的作用。這對(duì)于靜態(tài)頁(yè)面非常好，但是無法應(yīng)用于數(shù)據(jù)庫(kù)驅(qū)動(dòng)的動(dòng)態(tài)內(nèi)容?？?，從而實(shí)現(xiàn)將Web應(yīng)用中的相關(guān)文件離線存儲(chǔ)。也就是瀏覽器會(huì)下載脫機(jī)使用應(yīng)用程序。加載被修改過的資源。自動(dòng)和手動(dòng)兩種緩存更新方式。3)服務(wù)器負(fù)載更少：瀏覽器只會(huì)從發(fā)生了更改的服務(wù)器下載資源。是處于離線狀態(tài)，但也能夠正常地被使用。在HTML5中，主要通過在“CacheManifest”。線狀況，并分別做出對(duì)應(yīng)的處理。在HTML5中，提供了兩種檢測(cè)當(dāng)前網(wǎng)絡(luò)是否在線的方。據(jù)，而WebSQLDatabase則提供了對(duì)基本的關(guān)系數(shù)據(jù)庫(kù)的存儲(chǔ)功能的支持。用哪些文件，這些都是由“CacheManifest”文件來管理的。1)首行必須是CACHEMANIFEST，它標(biāo)識(shí)這是manifest的配置文件；其后的每一行包含兩個(gè)URI并由空格分隔，6)注釋要另起一行，并以#號(hào)開頭。文件“CacheManifest”一般都位于Web應(yīng)用程序所在的根目錄中。
【正文】 removeUIItem(title)。 // 從界面中刪除 removeDataItem(title)。 // 從數(shù)據(jù)中刪除 } function addUIItem(title){ var item = (li)。 (ondblclick, remove(39。+title+39。))。 =title。 var list = (list)。 (item)。 } 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 15/19 頁(yè) 15 function removeUIItem(title){ var list = (list)。 for (var i = 0。 i 。 i++) { if([i].innerHTML == title){ ([i])。 } } } 數(shù)據(jù)存儲(chǔ)代碼 數(shù)據(jù)存儲(chǔ)代碼定義在 中， 中的代碼包含添加便簽、刪除便簽和與服務(wù)器同步等數(shù) 據(jù)操作。其中用到了 屬性、 online 事件、本地存儲(chǔ)等 HTML5 新功能。 “添加便簽” addDataItem 函數(shù)的執(zhí)行流程： 1) 通過 判斷是否在線，如果在線，那么調(diào)用 addServerItem()函數(shù)直接把數(shù)據(jù)存儲(chǔ)到服務(wù)器上。 addServerItem()將在后面列出；而如果離線，那么把數(shù)據(jù)添加到 localStorage 的“ toAdd”項(xiàng)中。 2) “刪除便簽” removeDataItem 函數(shù)的執(zhí)行流程： 3) 通過 判斷是否在線，如果在線，那么調(diào)用 removeServerItem 直接在服務(wù)器上刪除數(shù)據(jù)。 removeServerItem 將在后面列出。 4) 如果離線，那么把數(shù)據(jù)添加到 localStorage 的“ toRemove”項(xiàng)中。 5) “數(shù)據(jù)同步” SyncWithServer 函數(shù)是在 的最后一行注冊(cè)的，所注冊(cè)的window 的 online 事件處理函數(shù) SyncWithServer()會(huì)在 online 事件發(fā)生時(shí)將被調(diào)用。其功能如下： 6) 如果 表示當(dāng)前離 線，則不做任何操作；如果在線，將把 localStorage對(duì)象中的名稱為 toAdd 的屬性數(shù)據(jù)項(xiàng)中的所有數(shù)據(jù)添加到服務(wù)器上，并刪除 toAdd的屬性數(shù)據(jù)項(xiàng)。 7) 把 localStorage 對(duì)象中的名稱為 toRemove 項(xiàng)的所有數(shù)據(jù)從服務(wù)器中刪除，并刪除toRemove 的屬性數(shù)據(jù)項(xiàng)。 8) 刪除當(dāng)前頁(yè)面列表中的所有便簽，并調(diào)用 getServerItems()函數(shù)實(shí)現(xiàn)從服務(wù)器端獲取所有的便簽，并添加在頁(yè)面的相關(guān)列表中。 getServerItems()函數(shù)將在后面列出。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 16/19 頁(yè) 16 var storage = window[39。localStorage39。]。 function addDataItem(title){ if () { // 在線狀態(tài) addServerItem(title)。 } else{ // 離線狀態(tài) var str = (toAdd)。 if(str == null){ str = title。 } else{ str = str + , + title。 } (toAdd, str)。 } } function removeDataItem(title){ if () { // 在線狀態(tài) removeServerItem(title)。 } else{ // 離線狀態(tài) var str = (toRemove)。 if(str == null){ str = title。 } else{ str = str + , + title。 } (toRemove, str)。 } 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 17/19 頁(yè) 17 } function SyncWithServer(){ // 如果當(dāng)前是離線狀態(tài)，不需要做任何處理 if ( == false){ return。 } var i = 0。 //和服務(wù)器同步添加操作 var str = (toAdd)。 if(str != null){ var addItems = (,)。 for(i = 0。 i。 i++) { addDataItem(addItems[i])。 } (toAdd)。 } // 和服務(wù)器同步刪除操作 str = (toRemove)。 if(str != null){ var removeItems = (,)。 for(i = 0。 i。 i++) { removeDataItem(removeItems[i])。 } (toRemove)。 } // 刪除界面中的所有便簽 var list = (list)。 while( != ) ()。 if() ()。 // 從服務(wù)器獲取全部便簽，并顯示在界面中 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 18/19 頁(yè) 18 var allItems = getServerItems()。 if(allItems != ){ var items = (,)。 for(i = 0。 i。 i++) { addUIItem(items[i])。 } } } (online, SyncWithServer,false)。 （ 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ù)器編寫代碼。 其中的 addServerItem 函數(shù)實(shí)現(xiàn)在服務(wù)器中添加一項(xiàng)，而 removeServerItem 函數(shù)實(shí)現(xiàn)在服務(wù)器中刪除一項(xiàng)， getServerItems 函數(shù)實(shí)現(xiàn)返回服務(wù)器中存儲(chǔ)的便簽列表。 刪除脫機(jī)緩存文件 對(duì)于脫機(jī)狀態(tài)下所緩 存的各個(gè)資源文件，也可以將它們刪除掉。下面為在火狐 中的實(shí)現(xiàn)過程：進(jìn)入“工具” “選項(xiàng)” “高級(jí)”中選擇“網(wǎng)絡(luò)”選項(xiàng)卡。在此頁(yè)面中可以了解到多少磁盤空間的離線存儲(chǔ)，并可以清除所有數(shù)據(jù)。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 19/19 頁(yè) 19
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1