在HTML5之前，我们必须连接网络才能访问页面。但随着移动 互联网 的兴起，设备终端的位置不在固定。而移动设备非常依赖无线信号，可 无线网络 的可靠性并 不稳定 ，比如在过隧道或是信号强度弱的地方，无法访问网站，这无疑对用户体验是不好的，所以HTML5中的离线缓存（applicationCache）就解决了这个问题。
一：什么是离线缓存
HTML5离线缓存又名applicationCache，为Html5新特性之一， 简单 理解就是第一次加载后将数据缓存，在没有清除缓存前提下，下一次没有网络也可以加载，用在静态数据的网页或游戏比较好用。当然，Html5新的特性都不是所有浏览器都能支持的，离线缓存也一样。反正IE9（包括）及IE9以下的浏览器目前是不支持的。如果用在移动端， 应该 都能支持。检测 是否 支持离线缓存也是比较简单的。
<script>
if(window.applicationCache){
alert("支持离线缓存");
}
else{
alert("不支持离线缓存");
}
</script>二：使用方法
HTML5离线缓存，是从浏览器的缓存中分出来的 一块 缓存区，若要在这个缓存中保存数据，需要使用描述文件（.manifest），列出需要下载和缓存的资 源 。
1.引入manifest文件
<!DOCTY PE html>
<html>
<head>
<!--就是在这里引入，注意引入也是讲究路劲跟文件名的，
这里文件名是 test ，后缀是m ai nfest，路劲在当前的html下面
（一 般放在html当前文件夹下面也没什么问题，我是这么放的）-->
<html manifest="test.manifest">
< ;m eta charset="UTF-8">
<t IT le>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.css
NETWORK:
*
FALLBACK
online.html offline.htmlmanifest文件需要配置正确的MIME -t ype，即“text/cache-manifest”，这个是在web服务器上进行配置。
解析一下：
以 # 开头的行表示的是注释。CACHE下面的都是缓存的文件，NETWORK表示每次都从网络请求，然后缓存，指定的文件总是从网络上请求最新的。FALLBACK：指定的文件若是找不到，会被重定向到新的地址。规范都是大写。
3.通过JS动态控制更新
应用在离线后将保持缓存状态，除非发生以下某种情况：
用户清除了浏览器对您网站的数据存储。
清单文件经过修改。
请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。
1）缓存状态：window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 stat us 属性可用于查看缓存的当前状态。
applicationCache.status的值如下：
0 === 未缓存
1 == = 空闲（缓存为最新状态）
2 === 检查中
3 === 下载中
4 === 更新就绪
5 === 缓存过期
VAR appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
br eak;
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" hr ef="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.0 CACHE: test.css
test.css
output { font: 2em sans -s erif; }test.js
setTimeout(function () {
document.getElementById('test').value = new Date();
}, 1000);以上就是html5 如何做到application cache？离线储存技术的简要说明的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 html5 如何做到application cache？离线储存技术的简要说明 全部内容，希望文章能够帮你解决 html5 如何做到application cache？离线储存技术的简要说明 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5 如何做到application cache？离线储存技术的简要说明的详细内容...