通過(guò)代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5脫機(jī)應(yīng)用技術(shù)及實(shí)例-免費(fèi)閱讀
【正文】 其中的 addServerItem 函數(shù)實(shí)現(xiàn)在服務(wù)器中添加一項(xiàng)，而 removeServerItem 函數(shù)實(shí)現(xiàn)在服務(wù)器中刪除一項(xiàng)， getServerItems 函數(shù)實(shí)現(xiàn)返回服務(wù)器中存儲(chǔ)的便簽列表。 if() ()。 } // 和服務(wù)器同步刪除操作 str = (toRemove)。 } 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 17/19 頁(yè) 17 } function SyncWithServer(){ // 如果當(dāng)前是離線(xiàn)狀態(tài)，不需要做任何處理 if ( == false){ return。 if(str == null){ str = title。 7) 把 localStorage 對(duì)象中的名稱(chēng)為 toRemove 項(xiàng)的所有數(shù)據(jù)從服務(wù)器中刪除，并刪除toRemove 的屬性數(shù)據(jù)項(xiàng)。其中用到了 屬性、 online 事件、本地存儲(chǔ)等 HTML5 新功能。 =title。 } } function add(title){ addUIItem(title)。 newNote 調(diào)用 add 函數(shù)。 假設(shè)需要開(kāi)發(fā)一個(gè)便簽管理的 Web 應(yīng)用程序，用戶(hù)可以在其中添加和刪除便簽，并且本系統(tǒng)支持離線(xiàn)訪(fǎng)問(wèn)功能，從而允許用戶(hù)在離線(xiàn)狀態(tài)下添加、刪除便簽，并且當(dāng)在線(xiàn)連接以后能夠同步到服務(wù)器上。 （ 1） 屬性 屬性表示當(dāng)前是否在線(xiàn)，如果該屬性的值為 true，則表示目前為在線(xiàn)狀態(tài)；而如果值為 false，則表示當(dāng)前為離線(xiàn)狀態(tài)。 ()。load39。)。 緩存更新過(guò)程中的相關(guān)事件 （ 1）緩存新過(guò)程中的相關(guān)事件 applicationCache 對(duì)象再更新緩存的過(guò)程中會(huì)觸發(fā)各種事件。該方法不僅可以很明確地區(qū)分離線(xiàn) Web 應(yīng)用的版本，而且還可以輕易地通知瀏覽器更新緩存中的相關(guān)資源文件 —— 要表明一個(gè)新的清單文件，只需更改現(xiàn)有清單文件的部分或全部?jī)?nèi)容。因此，開(kāi)發(fā)人員無(wú)需再在“ Cache Manifest”清單文件中羅列定義出這些 Web 頁(yè)面文件本身。 Web 瀏覽器需要知道是否啟用緩存以及到哪里去找到緩存清單文件。當(dāng)然，它還可以包括視頻、 PDFs、 XML 文件等。clock39。 （ 3）“ Cache Manifest”文件中所有的資源文件的 URLs 都是相對(duì)的 任何 相對(duì) URLs 地址必須是相對(duì)于緩存清單文件“ Cache Manifest”文件，而緩存清單文件“ Cache Manifest”一般都位于 Web 應(yīng)用程序所在的根目錄中。本地存儲(chǔ)主要提供以“ key/value”鍵值對(duì)的存儲(chǔ)方式存儲(chǔ)數(shù)據(jù)，而 Web SQL Database 則提供了對(duì)基本的關(guān)系數(shù)據(jù)庫(kù)的存儲(chǔ)功能的支持 。 開(kāi)發(fā)支持離線(xiàn)的 Web 應(yīng)用程序所需要考慮的三 個(gè)問(wèn)題 （ 1）離線(xiàn)資源緩存（也稱(chēng)為 AppCache） 為了保證 Web 應(yīng)用在離線(xiàn)狀況下也能夠正常地應(yīng)用，首先需要緩存在離線(xiàn)狀況下所需要的所有資源文件。這對(duì)于靜態(tài)頁(yè)面非常好，但是無(wú)法應(yīng)用于數(shù)據(jù)庫(kù)驅(qū)動(dòng)的動(dòng)態(tài)內(nèi)容。 而 HTML5 提供了脫機(jī)應(yīng)用程序方面的支持 —— 也稱(chēng)應(yīng)用緩存（ Application Cache）接口，從而實(shí)現(xiàn)將 Web 應(yīng)用中的相關(guān)文件離線(xiàn)存儲(chǔ)。為此，需要告訴瀏覽器緩存哪些資源文件，瀏覽器才能在處于在線(xiàn)狀態(tài)時(shí)，把這些相關(guān)的資源文件緩存到本地。 “ Cache Manifest”文件的語(yǔ)法格式 （ 1）使用“ Cache Manifest”文件列舉出需要離線(xiàn)時(shí)訪(fǎng)問(wèn)的資源 在離線(xiàn)狀態(tài)下需要瀏覽器保存哪些文件，不需要保存哪些文件、在線(xiàn)與離線(xiàn)時(shí)需要調(diào)用哪些文件，這些都是由“ Cache Manifest”（ manifest）文件來(lái)管理的。 Cache Manifest 文件 及 資源緩存示例 “ Cache Manifest”文件的一個(gè)應(yīng)用示例 （ 1）“ Cache Manifest”文本文件的主要作用 為了能夠讓用戶(hù)在離線(xiàn)狀態(tài)下繼續(xù)訪(fǎng)問(wèn) Web 應(yīng)用，開(kāi)發(fā)者需要提供一個(gè)“ Cache Manifest”的文本文件，在該文件中列出所有需要在離線(xiàn)狀態(tài)下使用的資源文件清單，瀏覽器會(huì)把這些 資源文件緩存到本地。).value = new Date()。只要列示在清單中，所有這些文件都將被瀏覽器緩存并可在離線(xiàn)模式中使用。 因此，需要修改 頁(yè)面中的相關(guān)標(biāo)簽的屬性定義實(shí)現(xiàn)將 文件鏈接到 HTML 文檔中。 （ 7）在 Web 服務(wù)器端配置檢查緩存清單的 MIME 類(lèi)型 根據(jù) HTML5 的緩存清單規(guī)范規(guī)定，瀏覽器在下載和處理緩存清單文件時(shí)必須要執(zhí)行一個(gè)額外的驗(yàn) 證步驟， 即檢查緩 存清單 的 MIME 類(lèi) 型，該 MIME 類(lèi) 型必須為 text/cachemanifest。 （ 2）手動(dòng)更新 開(kāi)發(fā)者可以使用 的接口更新緩存，此時(shí)需要檢測(cè)其中的一 個(gè)status 屬性的值 （ ），如果其值是 UPDATEREADY，那么可以調(diào)用 ()函數(shù)更新緩存。從而可以實(shí)現(xiàn)對(duì)更新過(guò)程進(jìn)行監(jiān)控和處理各種異常、提示等待狀態(tài)等行為以提高用戶(hù)的體驗(yàn)。 } 不管是 manifest 文件還是它所羅列的資源文件下載失敗，整個(gè)更新過(guò)程就終止了，瀏覽器會(huì)使用上一個(gè)最新的緩存。, function(e) { (39。 } } else { /* 不需要重新加載更新后的版本時(shí)，則直接退出 */ } } 由于更新后的版本不會(huì)立即被使用，為了使得用戶(hù)能夠即刻使用更新后的新版本而不需 要 強(qiáng) 制 用 戶(hù) 重 載 更 新 后 的 頁(yè) 面 ， 可 以 在 JS 程 序 中 調(diào) 用()函數(shù)從而達(dá)到重新加載更新后的 Web 頁(yè)面。因?yàn)楫?dāng)網(wǎng)絡(luò)狀態(tài)發(fā)生變化時(shí)， 屬性的值也會(huì)隨之變化。 應(yīng)用程序頁(yè)面 這個(gè)程序的界 面很簡(jiǎn)單，用戶(hù)點(diǎn)擊“增加信息”按鈕可以在彈出框中創(chuàng)建新的便簽，雙擊某便簽就表示刪除它。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 14/19 頁(yè) 14 3) add 函數(shù)分別調(diào)用 addUIItem 和 addDataItem 添加頁(yè)面元素和數(shù)據(jù)， addDataItem 代碼將在后面列出。 // 在界面中添加 addDataItem(title)。 var list = (list)。 “添加便簽” addDataItem 函數(shù)的執(zhí)行流程： 1) 通過(guò) 判斷是否在線(xiàn)，如果在線(xiàn)，那么調(diào)用 addServerItem()函數(shù)直接把數(shù)據(jù)存儲(chǔ)到服務(wù)器上。 8) 刪除當(dāng)前頁(yè)面列表中的所有便簽，并調(diào)用 getServerItems()函數(shù)實(shí)現(xiàn)從服務(wù)器端獲取所有的便簽，并添加在頁(yè)面的相關(guān)列表中。 } else{ str = str + , + title。 } var i = 0。 if(str != null){ var removeItems = (,)。 // 從服務(wù)器獲取全部便簽，并顯示在界面中 楊教授工作室 精心創(chuàng)作的
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1