陳貽品 匡成寶（通訊作者） 湖南高速鐵路職業(yè)技術(shù)學(xué)院

HTML5離線應(yīng)用開發(fā)技術(shù)研究

陳貽品 匡成寶（通訊作者） 湖南高速鐵路職業(yè)技術(shù)學(xué)院

本文在講解HTML5技術(shù)的新特性的同時著重介紹在網(wǎng)絡(luò)異常時web應(yīng)用的數(shù)據(jù)處理和解決方法。離線狀態(tài)下的數(shù)據(jù)通過離線資源緩存、在線監(jiān)測、本地數(shù)據(jù)存儲等三步驟來處理。通過客戶端前期儲存數(shù)據(jù)的技術(shù)比較來改善它的不足，本文通過HTML5的webstorage API的技術(shù)讓客戶端數(shù)據(jù)儲存的開發(fā)方法變得更加的簡單易行。

HTML Web 離線應(yīng)用

在上世紀(jì)90年代HTML技術(shù)應(yīng)運而生。20世紀(jì)90年代末，經(jīng)典的HTML4成為互聯(lián)網(wǎng)標(biāo)準(zhǔn)。HTML5的前身是web application 1.0草案，該草案2004年被提出2007年被W3C認可。2008年新一代的HTML技術(shù)HTML5在1月22日正式發(fā)布，新技術(shù)在修復(fù)上一代技術(shù)種種問題的同時增強了多媒體方面的表現(xiàn)，并且增加和廢除了一部分標(biāo)簽?，F(xiàn)如今HTML5已解決了瀏覽器對眾多插件的依賴，并得到了大部分瀏覽器的技術(shù)支持。

1 HTML5關(guān)鍵技術(shù)

創(chuàng)建一個成熟的應(yīng)用平臺是HTML5的目標(biāo)，與之前的web相比它還用來表示web的內(nèi)容。本文通過對離線應(yīng)用的開發(fā)作為研究的重點，對離線應(yīng)用的特點和技術(shù)的特性進行深入的探究分析，通過相關(guān)的研究以后，將現(xiàn)階段web領(lǐng)域中新穎的技術(shù)，進行全面的跟蹤和利用，以此來提升HTML5離線應(yīng)用技術(shù)。

2 HTML5的離線應(yīng)用及開發(fā)

2.1 離線資源緩存

在HTML5中可以使用cache manifest來實現(xiàn)簡單的靜態(tài)頁面離線資源緩存，具體實施方法有兩種，分別是手動和自動兩種緩存更新方式。首先要在cache manifest中列出目標(biāo)緩存資源，在瀏覽器在離線的情況時將目標(biāo)文件緩存到本地。之后當(dāng)客戶端處于在線的狀態(tài)時，目標(biāo)文件通過應(yīng)用程序自動加載。

2.2 在線狀態(tài)檢測

在開發(fā)基于web應(yīng)用程序的實際過程中，通常要針對是否在線來做出相應(yīng)的處置。在HTML5中可以通過兩種方式年檢測瀏覽器是否在線，分別是Navigator．online屬性和online與offline。Navigator．online屬性為一個布爾值，當(dāng)在線時布爾值為true，反之為離線狀態(tài)。通過獲取布爾值確定了當(dāng)前網(wǎng)絡(luò)的在線狀況之后，開發(fā)者根據(jù)不同的情況編寫相應(yīng)的應(yīng)用代碼。

cache manifest緩存資源文件可以實現(xiàn)用戶離線時訪問靜態(tài)頁面，但當(dāng)需要完成客戶端處于離線狀態(tài)下的數(shù)據(jù)交互應(yīng)用時，首先必須要判斷當(dāng)前web的在線狀態(tài)之后客戶端瀏覽器與web服務(wù)器才能實現(xiàn)數(shù)據(jù)交互。

2.3 本地數(shù)據(jù)儲存

在HTML4和更早的版本中，數(shù)據(jù)一般是通過cookie儲存機制保存在用戶客戶端的，這種方法有很多的缺陷，例如會限制數(shù)據(jù)的大小、保密性不強等特點。隨著web應(yīng)用技術(shù)的不斷深入，HTML5為了數(shù)據(jù)能夠在離線與在線狀態(tài)下，更好、更多、更快的儲存到客戶端與同步到服務(wù)器上，HTML5針對不同的儲存需要提供了兩種新的儲存方式，分別為Web Database與Web SQL Database。Web Database主要功能是臨時或永久保存客戶端的少量數(shù)據(jù)。Web SQL Database是客戶端本地化的一套數(shù)據(jù)庫系統(tǒng)，可將大量的數(shù)據(jù)保存在客戶端。

2.4 webstorage存儲

在HTML5中web儲存分兩種，分別是localStorage與sessionStorage。所以localStorage與sessionStorage的區(qū)別在于后者保存當(dāng)前訪問的頁面。Webstorage頁面儲存是HTML5中的一項重要技術(shù)，它的主要作用是將數(shù)據(jù)儲存在客戶端，區(qū)分長期數(shù)據(jù)和會話數(shù)據(jù)可以通過WebstorageAPI來實現(xiàn)，所以對應(yīng)的API分sessionStorage(保存會話數(shù)據(jù))、localStorage（在客戶端長期保存數(shù)據(jù))

2.5 IndexedDB

IndexedDB是一種數(shù)據(jù)庫，是用來將結(jié)構(gòu)化數(shù)據(jù)儲存到瀏覽器中的。IndexedDB開發(fā)了一套API支持搜索查詢并且還能夠方便的存取JavaSeript對象。HTML5－WebStorage中的一個重要環(huán)節(jié)就是IndexedDB，是一種輕量級NOSQL數(shù)據(jù)庫，W3C給IndexedDB定義了許多的接口，Database對象定義成IDBDataBase，從IDBFactory中可以獲得IDBDataBase。瀏覽器對象中只有indexedDB這個實例實現(xiàn)了IDBFactory。

3 小結(jié)

本文通過HTML5的離線應(yīng)用特性解決了當(dāng)網(wǎng)絡(luò)連接異常時的離線數(shù)據(jù)儲存，從離線數(shù)據(jù)應(yīng)用的實際情況開始，通過離線資源緩存、在線檢測、本地數(shù)據(jù)存儲等過程，探討在怎么實現(xiàn)離線狀態(tài)下交互式頁面客戶端數(shù)據(jù)存儲和靜態(tài)頁面離線資源緩存，并為web應(yīng)用在離線時的開發(fā)提出了有效的做法，相信隨著時代的不斷發(fā)展，HTML5終會越來越成熟。

[1]龍奇．新一代網(wǎng)絡(luò)技術(shù)標(biāo)準(zhǔn)HTML5的研究［J］．科學(xué)信息，2011(10):245

[2]黃永慧，陳程凱．HTML5在移動應(yīng)用開發(fā)上的應(yīng)用前景［J］．計算機技術(shù)與發(fā)展，2013(7)：207-210