HTML5应用缓存机制

最新推荐文章于 2023-06-05 16:00:56 发布

外婆的澎湖湾--限定版

最新推荐文章于 2023-06-05 16:00:56 发布

阅读量459

点赞数

文章标签： html5 缓存机制数据网络应用

本文链接：https://blog.csdn.net/qq_31984915/article/details/53118856

版权

首先先上一张图：

用360浏览器的用户对这张图应该都是耳熟能详了吧，没错，当网络不通畅时使用360浏览器，便会有这张图弹出来。为什么没有网络还能弹出这一副画面呢？这就关乎HTML5的应用缓存机制了。

那什么是应用缓存机制呢？

应用缓存，是专门从浏览器的缓存中分出一块缓存区用于缓存数据，从而在离线状态下也能读取和使用该数据，这就是应用缓存，或者说叫appcache

怎么使用应用缓存？

首先，我们需要新建一个自定义的清单文件（manifest file），在这里我先将其命名为"cache_manifest"

然后其中的具体代码格式见下：

CACHE MANIFEST  
# version1
CACHE:  
# 这里放直接缓存的文件
NETWORK:  
# 这里放的文件不缓存，不能离线读取，只能在线读取
FALLBACK:  
# 这里放备份文件

<1>首先在开头必须声明CACHE MANIFEST这一行代码（必需）

<2>可用“#”符号进行注释

<3>具体内容可分为三块：

CACHE:这里放的是需要直接缓存的文件
NETWORK:这里放的文件不缓存，不能离线读取，只能在线读取
FALLBACK: 这里放备份文件,比如页面无法访问时的回退页面（ 404 页面）

<4>放置的文件可以是js文件，css文件，html文件，也可以是各种格式的图片等，如下：

CACHE MANIFEST  
# version1
CACHE:  
img/0.jpg
index.html
js/task.js
css/mycss.css
NETWORK:  

FALLBACK:

<5>怎么使用上面缓存清单文件（manifest file）呢？只要在当前的html的manifest属性里附加上你编写的缓存清单文件就可以啦，

比如我写的就是：

<html manifest="cache_manifest">

下面我具体演示一下：

这里有两张在云端的图片，第一张地址是http://cherry037.github.io/task7/images/middle-left.jpg（在此称之为男子西装图吧）

第二张图地址是：http://chenbujuan.github.io/IFE-FirstStage-Task7/images/pic08.jpg（在此称之为黄衣女人图吧）

我的清单缓存文件名称为cache_manifest

CACHE MANIFEST  
# version1
CACHE:  
http://cherry037.github.io/task7/images/middle-left.jpg
NETWORK:  
http://chenbujuan.github.io/IFE-FirstStage-Task7/images/pic08.jpg
FALLBACK:  
# 这里放备份文件

HTML页面代码如下：

<!DOCTYPE html>
<html manifest="cache_manifest">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
       	  applicationCache.onupdateready = function(){
            applicationCache.swapCache();
            location.reload();
          };
         </script>
	</head>
	<body>
          <img src="http://cherry037.github.io/task7/images/middle-left.jpg"  style="width:400px;height:200px;"/>
          <img src="http://chenbujuan.github.io/IFE-FirstStage-Task7/images/pic08.jpg"  style="width:400px;height:400px;"/>
	</body>
</html>

当网络状态联通时，demo如下，两张图片都能正常显示：

当我开启飞行模式，离线状态开启时，demo如下，“男人西装图”仍然能正常显示，说明通过缓存清单文件它已经被成功缓存起来了，而“黄衣女人图”则因为被设置为不缓存所以显示为一张默认的图片了

外婆的澎湖湾--限定版

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5应用缓存机制

首先先上一张图：用360浏览器的用户对这张图应该都是耳熟能详了吧，没错，当网络不通畅时使用360浏览器，便会有这张图弹出来。为什么没有网络还能弹出这一副画面呢？这就关乎HTML5的应用缓存机制了。那什么是应用缓存机制呢？应用缓存，是专门从浏览器的缓存中分出一块缓存区用于缓存数据，从而在离线状态下也能读取和使用该数据，这就是应用缓存，或者说叫appcache怎么使用应用缓存？
复制链接

扫一扫