Html5离线缓存详细讲解

时间:2022-09-07 14:05:52

离线缓存是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文件代码的编写了。

Html5离线缓存详细讲解

解析一下:以#开头的行表示的是注释。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里面会看到缓存数据。

Html5离线缓存详细讲解

by the way , 尊重原创,有需转载,请写明出处。