html5中的离线缓存不起效果,什么原因?知道的小伙伴麻烦留言一下。
以下是火狐浏览器的效果:
IE浏览器效果
火狐浏览器效果
IE浏览器效果
扫描二维码关注公众号,回复:
12719015 查看本文章
cache.html
tomcat7目录下\conf\web.xml文件
<mime-mapping>
<extension>appcache</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
test.appcache文件
CACHE MANIFEST
#######2020-12-31 v1.0.0
#指明缓存入口
CACHE:
cache.html
test.js
../css/inputAndDiv.css
#以下资源必须在线访问
NETWORK:
../img/panda4.jpg
#如果index.html无法访问则用404.html代替
FALLBACK:
index.html ../404.html
test.js文件
/**
*
*/
window.onload = function() {
var divNode = document.getElementById("show");
divNode.onclick = function() {
alert("哈哈,我老家在江西于都.....赣南脐橙是我家乡的特产");
}
}
cache.html文件
<!DOCTYPE html>
<html manifest="test.appcache">
<head>
<meta charset="UTF-8">
<title>html5学习(离线缓存)</title>
<link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
<script type="text/javascript" src="test.js"></script>
</head>
<body style="background-color: #CCE8CF;">
<h3>html5学习(离线缓存)</h3>
<div id="show" style="height: 260px;">
江西省赣州市于都县
</div>
<img src="../img/panda4.jpg">
</body>
</html>
在网上搜索了一番,看到2个可能性比较大的原因:
1.服务器设置不当有关
2.HTML5废弃manifest属性
目前,我还不清楚到底是什么原因导致缓存不起效果,我先记录一下。
html5中离线缓存的实现
工作原理:
是基于一个新建的.appcache文件的缓存机制。解析清单离线存储资源,这些资源就像cookies一样存储起来。
如何实现呢?
在html的头部加入manifest属性,并在cache.manifest文件中编写离线存储的资源。在离线状态时,操作window.applicationCache进行实现
浏览器是如何对离线资源进行管理和加载的呢?
在线状态时,浏览器发现html头部有manifest属性,就会请求manifest文件,如果是第一次访问,则会根据manifest文件中请求的资源进行下载并离线存储。如果不是第一次访问,且资源已经离线存储了,浏览器就会通过离线存储的资源加载页面。并且对比新的manifest文件和旧的manifest文件,如果未更改,就不做任何操作了。如果更改了,就重新下载文件中的资源并离线存储。
离线状态时,就直接使用离线资源。