基本概念

1、HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件

2、可配置需要缓存的资源，网络无连接应用仍可用，本地读取缓存资源，提升访问速度，增强用户体验，减少请求，缓解服务器负担

3、使用上只需要一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名

4、根元素(html)添加属性manifest="demo.appcache"

manifest文件

1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST

2、可以指定多个CACHE、NETWORK、FALLBACK，无顺序限制

3、CACHE需要缓存那些资源

4、NETWORK不需要缓存那些资源，必须在网络下面才能访问

5、FALLBACK当访问不到某个资源时，自动由另外一个资源替换

manifest文件格式

1、顶行写CACHE MANIFEST

2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等

3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符

4、FALLBACK: 当前页面无法访问时退回的页面(回退;  后退)

<!DOCTYPE html>

<html lang="en" manifest="01.appcache">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<img src="http://img.diannao1.com/d/file/html/tv/hytv/2017-12-14/9ce8a2cb005069553d4379220ba17579.jpg" width="400px">

</body>

</html>
CACHE MANIFEST

# 注释以#开头

#下面是要缓存的文件

CACHE:
　　 js/jquery.min.js

    http://img.diannao1.com/d/file/html/tv/hytv/2017-12-14/9ce8a2cb005069553d4379220ba17579.jpg

#指定必须联网才能访问的文件

NETWORK:

    http://img.diannao1.com/d/file/html/tv/hytv/2017-12-14/9ce8a2cb005069553d4379220ba17579.jpg

#当前页面无法访问是回退的页面

FALLBACK:

    404.html

html5——应用缓存的更多相关文章

  1. HTML5离线缓存（Application Cache）

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

  2. HTML5 离线缓存管理库

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

  3. HTML5本地缓存数据

    //HTML5本地缓存数据 function putObj(key, data) { if (!!window.localStorage) { var obj = { "key": ...

  4. HTML5离线缓存问题

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

  5. HTML5 Web缓存&运用程序缓存&cookie,session

    在介绍HTML5 web缓存前,来认识一下cookie和session: session: 由于HTTP是无状态的,你是谁?你干了什么?抱歉服务器都是不知道的. 因此session(会话)出现了,它会 ...

  6. HTML5 离线缓存Appcache

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

  7. html5离线缓存使用

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

  8. 设置清除html5页面缓存

    设置清除html5页面缓存 html5端设置 meta 标签: <meta http-equiv="Pragma" content="no-cache" ...

  9. node.js与HTML5离线缓存

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

  10. HTML5离线缓存攻击测试

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

随机推荐

  1. 后台获得集合，变成json字符串，放到EL表达式，js进行获取遍历

    //把集合编程json字符串,放到el表达式 JSONArray array = new JSONArray(); JSONArray fromObject = array.fromObject(ar ...

  2. - > 动规讲解基础讲解三——混合背包（背包模板）

    将01背包,完全背包,和多重完全背包问题结合起来,那么就是混合三种背的问题 根据三种背包的思想,那么可以得到混合三种背包的问题可以这样子求解 for(int i=1; i<=N; ++i) if ...

  3. Tomcat配置文件server.xml（转）

    前言 Tomcat隶属于Apache基金会,是开源的轻量级Web应用服务器,使用非常广泛.server.xml是Tomcat中最重要的配置文件,server.xml的每一个元素都对应了Tomcat中的 ...

  4. Html5 history Api简介

    一. Html4的History API back() 后退,跟按下“后退”键是等效的. forward() 前进,跟按下“前进”键是等效的. go() 用法:history.go(x):在历史的范围 ...

  5. 【CV论文阅读】：Rich feature hierarchies for accurate object detection and semantic segmentation

    R-CNN总结 不总结就没有积累 R-CNN的全称是 Regions with CNN features.它的主要基础是经典的AlexNet,使用AlexNet来提取每个region特征,而不再是传统 ...

  6. 类似于SVN的文档内容差异对比工具winmerge

    原文:http://www.jianshu.com/p/99282a4f3870 https://sourceforge.net/projects/winmerge/?source=typ_redir ...

  7. 菜鸟nginx源代码剖析 框架篇（一） 从main函数看nginx启动流程

    菜鸟nginx源代码剖析 框架篇(一) 从main函数看nginx启动流程 Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.c ...

  8. Java Map 怎样实现Key 的唯一性？

    大家都知道.在Map和Set不可存在反复元素? 可是对于内部的细节我们并不了解.今天我们就一块来 探讨一下! 1 对于 HashMap  HashSet 他们的底层数据结构的实现是:维护了一张  Ha ...

  9. C#之快速排序

    算法描述 1.假定数组首位元素为“枢轴”,设定数列首位(begin)与末位(end)索引: 2.由末位索引对应元素与“枢轴”进行比较,如果末位索引对应元素大于“枢轴”元素,对末位索引减一(end--) ...

  10. tiny4412 裸机程序 九、串口排查驱动原因及字符图片显示【转】

    本文转载自:http://blog.csdn.net/eshing/article/details/37410571 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   一 ...