2.2 本地保存
為支持用戶在離線狀態下可以進行填報和編輯的操作，需要將應用相關的內容保存到本地，這裏的內容包括應用界麵資源以及應用數據。
（1）應用界麵資源。包含HTML5文件、CSS文件、Javas cript文件以及和應用界麵相關的圖片資源等文件。通過緩存清單文件的方式，將這些資源保存到用戶瀏覽器本地，保證在離線狀態下，應用的界麵可以正常使用。
（2）應用數據。應用數據的保存可以分為對原有數據的保存和對離線操作數據的保存兩類，在數據加載和數據操作的過程中完成：
數據加載。用戶訪問頁麵加載數據時，如果是在線狀態，則從服務器獲取數據並將獲得的數據保存到本地存儲；如果是離線狀態，則從本地存儲中獲取數據進行展示。
數據操作。在對數據做新增/修改操作時，如果是在線狀態，則直接向服務器發送請求進行操作，隨後在刷新頁麵時采用數據加載的方式，同時更新本地存儲中的數據；如果是離線狀態，則將用戶對數據進行的操作記錄在本地存儲中。
刪除操作比較特殊，離線狀態下的刪除，不能直接在數據集上做刪除的操作，而是進行標記，顯示的時候不做顯示，直到切換到在線狀態下與服務器端進行同步時才做刪除的操作。
2.3 數據同步
在由離線狀態切換到在線狀態時進行本地和服務器端數據的同步。通過監聽網絡狀態檢測事件，將同步操作注冊到online事件上。當online事件發生，即切換到在線狀態時，自動觸發同步操作。
數據同步通過讀取本地存儲中保存的離線操作記錄來完成，按照記錄下的操作和數據，向服務器端發送請求，實現中要保證對數據的操作可以按照記錄中的順序進行。
2.4 數據存儲方式
分別用local storage和Indexed DB兩種本地數據存儲方式進行了實現，相對於local storage的簡單易用，Indexed DB在開發實現上代價較大，但Indexed DB的查詢效率更高，可以支持的數據對象類型豐富，能實現功能更複雜的應用。
2.5 實現效果
分別在計算機和移動設備上進行測試，在計算機上Firefox和Chrome可以達到效果，而IE9不提供離線支持；在移動設備上，瀏覽器不支持Indexed DB方式，local storage方式可以達到效果。
綜合上述測試結果，目前各瀏覽器對HTML5規範，特別是對於本地存儲數據庫，支持程度有所不同，需要根據具體的需求選擇適合的實現方式，如離線周報填報場景中，如果需求主要是麵向移動設備的，則要選擇采用local storage的方式或Web SQL的方式來實現。
3 結語
通過HTML5提供的離線支持，可以在B/S應用中實現離線存儲、在線同步的功能，使Web應用可以在網絡不穩定的情況下提供服務，增強Web應用程序的功能，改善用戶體驗。
在實際的應用係統開發中，還需要考慮更多的實現細節問題，將HTML5提供的功能與需求結合起來，全麵考慮應用的場景以及所麵向的對象，選擇合適的實現方式和程序結構設計。
參考文獻
[1] （荷）Peter Lubbers，等，柳靖，等譯.HTML5程序設計（第2版）[M].北京：人民郵電出版社，2012.
[2] （美）Gauchat著，曾少寧，等.HTML5精粹：利用HTML5開發令人驚奇的Web站點和革命性應用[M].北京：機械工業出版社，2012.
[3] 羅大暉，陳娟.基於HTML5的Web離線應用研究與實現[J].計算機應用與軟件，2012，（12）.