HTML5離線怎么應用

本篇內容主要講解“HTML5離線怎么應用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML5離線怎么應用”吧!

　　HTML5離線有哪些功能

　　HTML5是目前正在討論的新一代HTML標準，它代表了現在Web領域的最新發展方向。在HTML5標準中，加入了新的多樣的內容描述標簽，直接支持表單驗證、視頻音頻標簽、網頁元素的拖拽、離線存儲和工作線程等功能。其中一個新特性就是對離線應用開發的支持。

　　在開發支持離線的Web應用程序時，開發者通常需要使用以下三個方面的功能：

　　離線資源緩存：需要一種方式來指明應用程序離線工作時所需的資源文件。這樣，瀏覽器才能在在線狀態時，把這些文件緩存到本地。此后，當用戶離線訪問應用程序時，這些資源文件會自動加載，從而讓用戶正常使用。HTML5中，通過cachemanifest文件指明需要緩存的資源，并支持自動和手動兩種緩存更新方式。

　　在線狀態檢測：開發者需要知道瀏覽器是否在線，這樣才能夠針對在線或離線的狀態，做出對應的處理。在HTML5中，提供了兩種檢測當前網絡是否在線的方式。

　　本地數據存儲：離線時，需要能夠把數據存儲到本地，以便在線時同步到服務器上。為了滿足不同的存儲需求，HTML5提供了DOMStorage和WebSQLDatabase兩種存儲機制。前者提供了易用的key/value對存儲方式，而后者提供了基本的關系數據庫存儲功能。

　　盡管HTML5還處于草稿狀態，但是各大主流瀏覽器都已經實現了其中的很多功能。Chrome、Firefox、Safari和Opera的最新版本都對HTML5離線功能提供了完整的支持。IE8也支持了其中的在線狀態檢測和DOMStorage功能。下面將具體介紹HTML5離線功能中的離線資源緩存、在線狀態檢測、DOMStorage和WebSQLDatabase，最后通過一個簡單的Web程序說明使用HTML5開發離線應用的方法。

　　離線資源緩存

　　為了能夠讓用戶在離線狀態下繼續訪問Web應用，開發者需要提供一個cachemanifest文件。這個文件中列出了所有需要在離線狀態下使用的資源，瀏覽器會把這些資源緩存到本地。本節先通過一個例子展示cachemanifest文件的用途，然后詳細描述其書寫方法，最后說明緩存的更新方式。

　　cachemanifest示例

　　HTML5離線怎么應用

　　我們通過W3C提供的示例來說明。ClockWeb應用由三個文件“clock.html”、“clock.css”和“clock.js”組成。

　　清單1.Clock應用代碼

　　XML/HTMLCode復制內容到剪貼板

Thetimeis:

　　/*clock.css*/

　　output{font:2emsans-serif;}

　　/*clock.js*/

　　setTimeout(function(){

　　document.getElementById('clock')。value=newDate();

　　},1000);

　　當用戶在離線狀態下訪問“clock.html”時，頁面將無法展現。為了支持離線訪問，開發者必須添加cachemanifest文件，指明需要緩存的資源。這個例子中的cachemanifest文件為“clock.manifest”，它聲明了3個需要緩存的資源文件“clock.html”、“clock.css”和“clock.js”。

　　清單2.clock.manifest代碼

　　XML/HTMLCode復制內容到剪貼板

　　CACHEMANIFEST

　　clock.html

　　clock.css

　　clock.js

　　添加了cachemanifest文件后，還需要修改“clock.html”，把標簽的manifest屬性設置為“clock.manifest”。修改后的“clock.html”代碼如下。

　　清單3.設置manifest后的clock.html代碼

　　XML/HTMLCode復制內容到剪貼板

Thetimeis:

　　修改后，當用戶在線訪問“clock.html”時，瀏覽器會緩存“clock.html”、“clock.css”和“clock.js”文件;而當用戶離線訪問時，這個Web應用也可以正常使用了。

　　cachemanifest格式

　　下面說明書寫cachemanifest文件需要遵循的格式。

　　首行必須是CACHEMANIFEST。

　　其后，每一行列出一個需要緩存的資源文件名。

　　可根據需要列出在線訪問的白名單。白名單中的所有資源不會被緩存，在使用時將直接在線訪問。聲明白名單使用NETWORK：標識符。

　　如果在白名單后還要補充需要緩存的資源，可以使用CACHE：標識符。

　　如果要聲明某URI不能訪問時的替補URI，可以使用FALLBACK：標識符。其后的每一行包含兩個URI，當第一個URI不可訪問時，瀏覽器將嘗試使用第二個URI。

　　注釋要另起一行，以#號開頭。

　　清單4的代碼中給出了cachemanifest中各類標識符的使用示例。

　　清單4.cachemanifest示例代碼

　　XML/HTMLCode復制內容到剪貼板

　　CACHEMANIFEST

　　#上一行是必須書寫的。

　　images/sound-icon.png

　　images/background.png

　　NETWORK:

　　comm.cgi

　　#下面是另一些需要緩存的資源，在這個示例中只有一個css文件。

　　XML/HTMLCode復制內容到剪貼板

　　CACHE:

　　style/default.css

　　FALLBACK:

　　/files/projects/projects

　　更新緩存

　　應用程序可以等待瀏覽器自動更新緩存，也可以使用Javascript接口手動觸發更新。

　　自動更新

　　瀏覽器除了在第一次訪問Web應用時緩存資源外，只會在cachemanifest文件本身發生變化時更新緩存。而cachemanifest中的資源文件發生變化并不會觸發更新。

　　手動更新

　　開發者也可以使用window.applicationCache的接口更新緩存。方法是檢測window.applicationCache.status的值，如果是UPDATEREADY，那么可以調用window.applicationCache.update()更新緩存。示范代碼如下。

　　清單5手動更新緩存

　　JavaScriptCode復制內容到剪貼板

　　if(window.applicationCache.status==window.applicationCache.UPDATEREADY)

　　{

　　window.applicationCache.update();

　　｝

　　在線狀態檢測

　　如果Web應用程序僅僅是一些靜態頁面的組合，那么通過cachemanifest緩存資源文件以后，就可以支持離線訪問了。但是隨著互聯網的發展，特別是Web2.0概念流行以來，用戶的提交的數據漸漸成為互聯網的主流。那么在開發支持離線的Web應用時，就不能僅僅滿足于靜態頁面的展現，還必需考慮如何讓用戶在離線狀態下也可以操作數據。離線狀態時，把數據存儲在本地;在線以后，再把數據同步到服務器上。為了做到這一點，開發者首先必須知道瀏覽器是否在線。HTML5提供了兩種檢測是否在線的方式：navigator.online和online/offline事件。

　　navigator.onLine

　　navigator.onLine屬性表示當前是否在線。如果為true,表示在線;如果為false,表示離線。當網絡狀態發生變化時，navigator.onLine的值也隨之變化。開發者可以通過讀取它的值獲取網絡狀態。

　　online/offline事件

　　當開發離線應用時，通過navigator.onLine獲取網絡狀態通常是不夠的。開發者還需要在網絡狀態發生變化時立刻得到通知，因此HTML5還提供了online/offline事件。當在線/離線狀態切換時，online/offline事件將觸發在body元素上，并且沿著document.body、document和window的順序冒泡。因此，開發者可以通過監聽它們的online/offline事件來獲悉網絡狀態。

　　DOMStorage

　　在開發支持離線功能的Web應用時，開發者需要在本地存儲數據。當前瀏覽器支持的cookie雖然也可以用來存儲數據，但是cookie長度非常小(通常幾k)，而且功能有限。因此，HTML5中新引入了DOMStorage機制，用于存儲key/value對，它的設計目標是提供大規模、安全且易用的存儲功能。

　　DOMStorage分類

　　DOMStorage分為兩類：sessionStorage和localStorage。除了以下區別外，這兩類存儲對象的功能是完全一致的。

　　sessionStorage用于存儲與當前瀏覽器窗口關聯的數據。窗口關閉后，sessionStorage中存儲的數據將無法使用。

　　localStorage用于長期存儲數據。窗口關閉后，localStorage中的數據仍然可以被訪問。所有瀏覽器窗口可以共享localStorage的數據。

　　DOMStorage接口

　　每一個Storage對象都可以存儲一系列key/value對，Storage接口定義為：

　　JavaScriptCode復制內容到剪貼板

　　interfaceStorage{

　　readonlyattributeunsignedlonglength;

　　getterDOMStringkey(inunsignedlongindex);

　　getteranygetItem(inDOMStringkey);

　　settercreatorvoidsetItem(inDOMStringkey,inanydata);

　　deletervoidremoveItem(inDOMStringkey);

　　voidclear();

　　};

　　其中最常用的接口是getItem和setItem。getItem用于獲取指定key的value，而setItem用于設置指定key的value。

　　DOMStorage示例

　　這里給出一個使用了sessionStorage的例子，localStorage的用法與它相同。首先使用SetItem添加了一個名為“userName”的項，它的值是“developerworks”。然后，調用getItem得到“userName”的值，并且彈出提示框顯示它。最后，調用removeItem刪除“userName”。

　　清單6DOMStorage示例代碼

　　XML/HTMLCode復制內容到剪貼板

　　WebSQLDatabase

　　除了DOMStorage以外，HTML5中還有另外一種數據存儲方式WebSQLDatabase。它提供了基本的關系數據庫功能，支持頁面上的復雜的、交互式的數據存儲。它既可以用來存儲用戶產生的數據，也可以作為從服務器獲取數據的本地高速緩存。例如可以把電子郵件、日程等數據存儲到數據庫中。WebSQLDatabase支持數據庫事務的概念，從而保證了即使多個瀏覽器窗口操作同一數據，也不會產生沖突。

　　WebSQLDatabase基本用法

　　創建和打開數據庫

　　使用數據庫的第一步是創建并打開數據庫，API是openDatabase。當數據庫已經存在時，openDatabase僅僅打開數據庫;如果這個數據庫不存在，那么就創建一個空數據庫并且打開它。openDatabase的定義是：

　　JavaScriptCode復制內容到剪貼板

　　DatabaseopenDatabase(inDOMStringname,inDOMStringversion,

　　inDOMStringdisplayName,inunsignedlongestimatedSize,

　　inoptionalDatabaseCallbackcreationCallback);

　　name：數據庫名。

　　version：數據庫版本。

　　displayName：顯示名稱。

　　estimatedSize：數據庫預估長度(以字節為單位)。

　　creationCallback：回調函數。

　　執行事務處理

　　在打開數據庫以后，就可以使用事務APItransaction。每一個事務作為操作數據庫的原子操作，不會被打斷，從而避免了數據沖突。transaction的定義是：

　　JavaScriptCode復制內容到剪貼板

　　voidtransaction(inSQLTransactionCallbackcallback,

　　inoptionalSQLTransactionErrorCallbackerrorCallback,

　　inoptionalSQLVoidCallbacksuccessCallback);

　　callback：事務回調函數，其中可以執行SQL語句。

　　errorCallback：出錯回調函數。

　　successCallback：執行成功回調函數。

　　執行SQL語句

　　在事務的回調函數callback中，可以執行SQL語句，API是executeSQL。executeSQL的定義是：

　　JavaScriptCode復制內容到剪貼板

　　voidexecuteSql(inDOMStringsqlStatement,

　　inoptionalObjectArrayarguments,inoptionalSQLStatementCallbackcallback,

　　inoptionalSQLStatementErrorCallbackerrorCallback);

　　sqlStatement：SQL語句。

　　arguments：SQL語句需要的參數。

　　callback：回調函數。

　　errorCallback：出錯回調函數。

　　WebSQLDatabase示例

　　下面通過一個例子說明WebSQLDatabase的基本用法。它首先調用openDatabase創建了名為“fooDB”的數據庫。然后使用transaction執行兩條SQL語句。第一條SQL語句創建了名為“foo”的表，第二條SQL語句向表中插入一條記錄。

　　清單7WebSQLDatabase示例代碼

　　JavaScriptCode復制內容到剪貼板

　　vardb=openDatabase('fooDB','1.0','fooDB',2*1024);

　　db.transaction(function(tx){

　　tx.executeSql('CREATETABLEIFNOTEXISTSfoo(idunique,text)');

　　tx.executeSql('INSERTINTOfoo(id,text)VALUES(1,"foobar")');

　　});

到此，相信大家對“HTML5離線怎么應用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！