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

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

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

Html5离线缓存详细讲解的更多相关文章

  1. HTML5离线缓存（Application Cache）

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  2. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

  3. HTML5离线缓存问题

    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...

  4. HTML5 离线缓存Appcache

    创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可: <ht ...

  5. html5离线缓存使用

    html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appc ...

  6. node.js与HTML5离线缓存

    最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node ...

  7. HTML5离线缓存攻击测试

    本实验采用局域网模拟,通过修改本地HOSTS文件来模拟域名以及DNS欺骗.合法网站使用Linux CentOS7的apache服务器搭建,IP为192.168.1.113,HOSTS文件中加入192. ...

  8. 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存

    本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...

  9. HTML5离线缓存

    参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5 应用程序缓存 又称离线缓存 ,即使断线了,刷新后也还是缓存了原来的页面,不会4 ...

随机推荐

  1. 《C#图解教程》读书笔记之三：方法

    本篇已收录至<C#图解教程>读书笔记目录贴,点击访问该目录可获取更多内容. 一.方法那些事儿 (1)方法的结构:方法头—指定方法的特征,方法体—可执行代码的语句序列: (2)方法的调用:参 ...

  2. JavaScript使用DeviceOne开发实战（四）仿优酷视频应用

    开发之前需要考虑系统的差异性,比如ios手机没有回退键,所以在开发时一定要考虑二级界面需要有回退键,否则ios的手机就会陷入到这个页面出不去了.安卓系统有回退键,针对这个情况需要要求用户在3秒钟之内连 ...

  3. 【异常处理_iis】无法启动IIS Express\iisexpress.exe

    正调试着程序,突然不能调试了.重启了也没用,还是报错:无法启动程序 C:\Program Files(X86)\IIS Express\iisexpress.exe. 和之前无法启动IIS Expre ...

  4. 谈谈javascript语法里一些难点问题（二）

    3)    作用域链相关的问题 作用域链是javascript语言里非常红的概念,很多学习和使用javascript语言的程序员都知道作用域链是理解javascript里很重要的一些概念的关键,这些概 ...

  5. HOOK技术的一些简单总结

    好久没写博客了, 一个月一篇还是要尽量保证,今天谈下Hook技术. 在Window平台上开发任何稍微底层一点的东西,基本上都是Hook满天飞, 普通应用程序如此,安全软件更是如此, 这里简单记录一些常 ...

  6. php json与xml序列化/反序列化

    在web开发中对象的序列化与反序列化经常使用,比较主流的有json格式与xml格式的序列化与反序列化,今天想写个jsop的小demo,结果发现不会使用php序列化,查了一下资料,做个笔记 简单数组js ...

  7. Senparc.Weixin.MP SDK 微信公众平台开发教程（八）：通用接口说明

    一.基础说明 这里说的“通用接口(CommonAPIs)”是使用微信公众账号一系列高级功能的必备验证功能(应用于开发模式). 我们通过微信后台唯一的凭证,向通用接口发出请求,得到访问令牌(Access ...

  8. WebApi系列~QQ互联的引入(QConnectSDK)

    回到目录 感谢与改进 首先要感谢张善友老兄为大家封装的这个DLL,它将QQ官方的相关API都集成到了这个里面,这对于开发人员来说,是个福音,有人会说,为什么QQ官方没有提供.net版的SDK呢,在这里 ...

  9. 日志分析系统——Hangout源码学习

    这两天看了下hangout的代码,虽然没有运行体验过,但是也算是学习了一点皮毛. 架构浅谈 Hangout可以说是java版的Logstash,我是没有测试过性能,不过据说是kafka这边性能要高出L ...

  10. Atitit 图像处理 常用8大滤镜效果 Jhlabs 图像处理类库 java常用图像处理类库

    Atitit 图像处理 常用8大滤镜效果 Jhlabs 图像处理类库 java常用图像处理类库1.1. 5种常用的Photoshop滤镜,分别针对照片的曝光.风格色调.黑白照片处理.锐利度.降噪这五大 ...