在HTML5之前，我們必須連接網絡才能訪問頁面。但隨著移動互聯網的興起，設備終端的位置不在固定。而移動設備非常依賴無線信號，可無線網絡的可靠性并不穩定，比如在過隧道或是信號強度弱的地方，無法訪問網站，這無疑對用戶體驗是不好的，所以HTML5中的離線緩存（applicationCache）就解決了這個問題。

一：什么是離線緩存
HTML5離線緩存又名applicationCache，為Html5新特性之一，簡單理解就是第一次加載后將數據緩存，在沒有清除緩存前提下，下一次沒有網絡也可以加載，用在靜態數據的網頁或游戲比較好用。當然，Html5新的特性都不是所有瀏覽器都能支持的，離線緩存也一樣。反正IE9（包括）及IE9以下的瀏覽器目前是不支持的。如果用在移動端，應該都能支持。檢測是否支持離線緩存也是比較簡單的。

 script  if(window.applicationCache){ alert( 支持離線緩存  else{ alert( 不支持離線緩存  /script 

二：使用方法

HTML5離線緩存，是從瀏覽器的緩存中分出來的一塊緩存區，若要在這個緩存中保存數據，需要使用描述文件（.manifest），列出需要下載和緩存的資源。

1.引入manifest文件

 !DOCTYPE html  html  head  !--就是在這里引入，注意引入也是講究路勁跟文件名的， 這里文件名是test，后綴是mainfest，路勁在當前的html下面 （一般放在html當前文件夾下面也沒什么問題，我是這么放的）--  html manifest= test.manifest  meta charset= UTF-8  title html5 離線緩存 /title  /head  body  /body  /html 

2.引入完了之后，接下來就是test.mainfest文件代碼的編寫了。

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

manifest 文件可分為三個部分：
①CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
②NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
③FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）

完整的代碼

CACHE MANIFEST//必須以這個開頭version 1.0 //最好定義版本，更新的時候只需修改版本號CACHE: m.png test.js test.cssNETWORK:FALLBACK online.html offline.html

manifest文件需要配置正確的MIME-type，即“text/cache-manifest”，這個是在web服務器上進行配置。

解析一下：
以#開頭的行表示的是注釋。CACHE下面的都是緩存的文件，NETWORK表示每次都從網絡請求，然后緩存，指定的文件總是從網絡上請求最新的。FALLBACK：指定的文件若是找不到，會被重定向到新的地址。規范都是大寫。

3.通過JS動態控制更新

應用在離線后將保持緩存狀態，除非發生以下某種情況：
用戶清除了瀏覽器對您網站的數據存儲。
清單文件經過修改。

請注意：更新清單中列出的某個文件并不意味著瀏覽器會重新緩存該資源。清單文件本身必須進行更改。

1）緩存狀態：window.applicationCache 對象是對瀏覽器的應用緩存的編程訪問方式。其 status 屬性可用于查看緩存的當前狀態。

applicationCache.status的值如下：
0 === 未緩存
1 === 空閑（緩存為最新狀態）
2 === 檢查中
3 === 下載中
4 === 更新就緒
5 === 緩存過期

var appCache = window.applicationCache; switch (appCache.status) {  case appCache.UNCACHED: // UNCACHED == 0  return UNCACHED  break;  case appCache.IDLE: // IDLE == 1  return IDLE  break;  case appCache.CHECKING: // CHECKING == 2  return CHECKING  break;  case appCache.DOWNLOADING: // DOWNLOADING == 3  return DOWNLOADING  break;  case appCache.UPDATEREADY: // UPDATEREADY == 4  return UPDATEREADY  break;  case appCache.OBSOLETE: // OBSOLETE == 5  return OBSOLETE  break;  default:  return UKNOWN CACHE STATUS  break;  };

2）主動更新緩存：applicationCache.update()

 script //利用定時器隔一定時間自動更新一下緩存 setInterval(function(){ applicationCache.update(); },50000); /script 

要以編程方式更新緩存，請先調用 applicationCache.update()。此操作將嘗試更新用戶的緩存（前提是已更改清單文件）。最后，當applicationCache.status 處于 UPDATEREADY 狀態時，調用 applicationCache.swapCache() 即可將原緩存換成新緩存。

var appCache = window.applicationCache;appCache.update(); // Attempt to update the user s cache.if (appCache.status == window.applicationCache.UPDATEREADY) {appCache.swapCache(); // The fetch was successful, swap in the new cache.

4.一個簡單的離線緩存的應用

建一個web工程AppCache,包括四個文件：
appcache_offline.html

 html manifest= test.manifest  head  title AppCache Test /title  link rel= stylesheet href= test.css  script src= test.js /script  /head  body  p output id= test /output /p  div id= log /div  /body  /html 

manifest文件：test.manifest

CACHE MANIFEST#VERSION 1.0CACHE:test.css

test.css

output { font: 2em sans-serif; }

test.js

setTimeout(function () {document.getElementById( test ).value = new Date();}, 1000);

以上就是html5 如何做到application cache？離線儲存技術的簡要說明的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。