1、應用場景
離線訪問對基於網絡的應用而言越來越重要。雖然所有瀏覽器都有緩存機制，但它們並不可靠，也不一定總能起到預期的作用。HTML5 使用ApplicationCache 接口解決了由離線帶來的部分難題。前提是你需要訪問的web頁面至少被在線訪問過一次。
2、使用緩存接口可爲您的應用帶來以下三個優勢：離線瀏覽 – 用戶可在離線時瀏覽您的完整網站
速度 – 緩存資源爲本地資源，因此加載速度較快。
服務器負載更少 – 瀏覽器只會從發生了更改的服務器下載資源。
3、離線本地存儲和傳統的瀏覽器緩存有什麼不同呢？
離線存儲爲整個web提供服務，瀏覽器緩存只緩存單個頁面；
離線存儲可以指定需要緩存的文件和哪些文件只能在線瀏覽，瀏覽器緩存無法指定；
離線存儲可以動態通知用戶進行更新。
4、如何實現
離線存儲是通過manifest文件來管理的，需要服務器端的支持，不同的服務器開啓支持的方式也是不同的。對於Tomcat需要修改 /conf/web.xml文件，添加如下MIMEType配置:
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>一個典型的manifest文件應該類似這樣：
CACHE MANIFEST//必須以這個開頭
version 1.0 //最好定義版本，更新的時候只需修改版本號
CACHE:
m.png
test.js
test.css
NETWORK:
*
FALLBACK
online.html offline.html要讓manifest管理存儲。
有了manifest文件後，還需要在html標籤中定義manifest屬性，如下：
<!DOCTYPE html>
<html lang="en" manifest='test.manifest'>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>應用在離線後將保持緩存狀態，除非發生以下某種情況：
用戶清除了瀏覽器對您網站的數據存儲。
清單文件經過修改。請注意：更新清單中列出的某個文件並不意味着瀏覽器會重新緩存該資源。清單文件本身必須進行更改。
緩存狀態:
window.applicationCache 對象是對瀏覽器的應用緩存的編程訪問方式。其 status 屬性可用於查看緩存的當前狀態：
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()。此操作將嘗試更新用戶的緩存（前提是已更改清單文件）。最後，當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.
}請注意：以這種方式使用 update() 和 swapCache() 不會向用戶提供更新的資源。此流程只是讓瀏覽器檢查是否有新的清單、下載指定的更新內容以及重新填充應用緩存。因此，還需要對網頁進行兩次重新加載才能向用戶提供新的內容，其中第一次是獲得新的應用緩存，第二次是刷新網頁內容。
好消息是，您可以避免重新加載兩次的麻煩。要使用戶更新到最新版網站，可設置監聽器，以監聽網頁加載時的 updateready 事件：//Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);6、APPCACHE 事件（詳見W3C Spec:http://www.w3.org/TR/2012/WD-html5-20120329/offline.html#offline）
通過對這些事件的監聽處理能更好的控制應用程序文件的緩存、更新。
7.一個簡單的離線緩存的應用
建一個web工程AppCache,包括四個文件：
appcache_offline.html
<html manifest="clock.manifest">
<head>
<title>AppCache Test</title>
<link rel="stylesheet" href="clock.css">
<script src="clock.js"></script>
</head>
<body>
<p><output id="clock"></output></p>
<div id="log"></div>
</body>
</html>CACHE MANIFEST
#VERSION 1.0
CACHE:
clock.css
clock.jsoutput { font: 2em sans-serif; }clock.js
setTimeout(function () {
document.getElementById('clock').value = new Date();
}, 1000);Wed Oct 17 2012 18:34:41 GMT+0800 (CST)