離線緩存是Html5新特性之一，簡單理解就是第一次加載后將數據緩存，在沒有清除緩存前提下，下一次沒有網絡也可以加載，用在靜態數據的網頁或游戲比較好用。當然，Html5新的特性都不是所有瀏覽器都能支持的，離線緩存也一樣。反正IE9（包括）及IE9以下的瀏覽器目前是不支持的。如果用在移動端，應該都能支持。檢測是否支持離線緩存也是比較簡單的。
<script>
if(window.applicationCache){
alert("支持離線緩存");
}
else{
alert("不支持離線緩存");
}
</script>
使用起來也很簡單。
①：首先要引入manifest文件。
<!DOCTYPE html> <html lang="en" manifest="test.manifest"> //就是在這里引入，注意引入也是講究路勁跟文件名的，這里文件名是test，后綴是mainfest，路勁在當前的html下面（一般放在html當前文件夾下面也沒什么問題，我是這么放的） <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
②：引入完了之后，接下來就是test.mainfest文件代碼的編寫了。
解析一下：以#開頭的行表示的是注釋。CACHE下面的都是緩存的文件，NETWORK表示每次都從網絡請求，然后緩存，指定的文件總是從網絡上請求最新的。FALLBACK：指定的文件若是找不到，會被重定向到新的地址。規范都是大寫。
目前為止就實現了離線緩存，再也不用擔心第二次打開還耗費流量了，用在靜態的手機網頁或是游戲比較好用。
③：緩存狀態：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; };
④:主動更新緩存：applicationCache.update()
<script>
//利用定時器隔一定時間自動更新一下緩存
setInterval(function(){
applicationCache.update();
},50000);
</script>
⑤：介紹一下緩存相關的事件。
1、updateready事件：當有新的緩存，並更新完以后，會觸發此事件。
例如代碼：
applicationCache.addEventListener("updateready",function(){
alert("緩存更新完成");
},false);
2、progress事件：當有新的緩存，並處於正在下載的過程中時，會不斷觸發此事件。progress中的event對象包含：loaded和total。loaded代表當前已經加載完成的文件，total為總共需要更新的文件數。
applicationCache.addEventListener("progress",function(){
alert(applicationCache.status); //3... 3表示正在下載
},false);
3、其他事件：
checking事件：正在檢查
downloading事件：正在下載
updatereadey事件：更新完成
obsolete事件：緩存過期
cached事件：空閑，緩存為最新狀態
error事件：報錯
noupdate事件：檢查更新結束，沒有需要更新。
補充一點，如果你的頁面有緩存，可以打開開發者工具，在console里面會看到緩存數據。
by the way , 尊重原創，有需轉載，請寫明出處。