HTML5:提供一种应用缓存机制,使得基于web的应用程序可以离线运行。开发者可以使用  Application Cache (AppCache)  接口设定浏览器缓存的数据并使得数据离线有效。 在处于离线状态时,即使用户点击刷新按钮,应用也能正常加载与工作。

使用应用缓存可以得到以下益处:

  • 离线浏览: 用户可以在离线状态下浏览网站内容。
  • 更快的速度: 因为数据被存储在本地,所以速度会更快。
  • 减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

用法:只需要在你的页面头部加上一个 manifest 的属性就可以了。

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

cache.manifest文件的书写方式:

CACHE MANIFEST
# v1 2011-08-14
# 这是一个完整的页面
index.html
cache.html
style.css
image1.png NETWORK:
network.html FALLBACK:
/ fallback.html

1.CACHE:表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要把页面自身也列出来。
2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些资源。不过,如果在CACHE和NETWORK中有一个相同的资源,那么这个资源还是会被离线存储,也就是说CACHE的优先级更高。
3.FALLBACK:表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了,那么就去访问fallback.html。

HTML5中离线储存对象 window.applicationCache 常用的事件:

1.oncached:当离线资源存储完成之后触发这个事件,这个是文档的说法,我在Chrome上面测试的时候并没有触发这个事件。
2.onchecking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件
3.ondownloading:当浏览器开始下载离线资源的时候会触发这个事件
4.onprogress:当浏览器在下载每一个资源的时候会触发这个事件,每下载一个资源就会触发一次。
5.onupdateready:当浏览器对离线资源更新完成之后会触发这个事件
6.onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件

HTML5的应用缓存的更多相关文章

  1. 使用html5的离线缓存技术

    突然想用html5的离线缓存,但是一直没有成功,在各种群里问发现很多人都没什么经验,最终终于在各种论坛找到解决方案了.下面就简单记录一下相关情况. 一.离线缓存的优点 我们都知道离线缓存主要是用来减少 ...

  2. HTML5应用程序缓存实现离线Web网页或应用

    HTML5应用程序缓存和浏览器缓存的区别.(有些)浏览器会主动保存自己的缓存文件以加快网站加载速度.但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接.如果网络没有连接,即使浏览器启用了 ...

  3. HTML5离线资源缓存简介

    cache manifest 示例 要使用离线资源缓存,开发者首先要提供一个 cache manifest 文件 它列出了所有需要在离线状态下使用的资源,浏览器会把这些资源缓存到本地 下面就是一个 c ...

  4. HTML5: HTML5 应用程序缓存

    ylbtech-HTML5: HTML5 应用程序缓存 1.返回顶部 1. HTML5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线 ...

  5. HTML5之应用缓存---manifest---缓存使用----Web前端manifest缓存

    相信来查这一类问题的都是遇到问题或者是初学者吧! 没关系相信你认真看过之后就会知道明白的 这是HTML5新加的特性 HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连 ...

  6. HTML5应用程序缓存Application Cache

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  7. Html5应用程序缓存ApplicationCache

    应用缓存机制可以参考http://www.w3school.com.cn/html5/html_5_app_cache.asp,不再赘述.利用此机制,html5游戏可以实现和native app类似的 ...

  8. 【HTML5】浅析HTML5应用程序缓存(ApplicationCache)

    一.为什么需要Web应用程序缓存 在移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,这对于web的伤害是很大的    ...

  9. HTML5应用程序缓存Application Cache详解

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  10. HTML5之应用缓存---manifest---缓存使用----HTML5的manifest缓存

    相信来查这一类问题的都是遇到问题或者是初学者吧! 没关系相信你认真看过之后就会知道明白的 这是HTML5新加的特性 HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连 ...

随机推荐

  1. WPF多源绑定

    将控件绑定到多个数据源,ListBox绑定到一个集合,其中每一项绑定到集合中对象的两个属性,并对绑定进行了格式化. <ListBox ItemsSource="{StaticResou ...

  2. 简单粗暴将sqlserver表以及数据迁移到oracle

    1.利用sqlserver工具查询出表中所有数据,全选,右键 -连同标题一起复制. 2.将数据保存到excel文件,数据 时间类型(yyyy--MM--dd HH:mm:ss)最好处理一下,需要将id ...

  3. CLRS:max_heap and min_heap operation (pseudocode)

    //max_heap heap_maximum:return A[1]    O(1); Extract_Heap_maximum:swap(A[1],A[heap.size])    adjust ...

  4. MongoDB副本集的搭建

    副本集是mongodb提供的一种高可用解决方案.相对于原来的主从复制,副本集能自动感知primary节点的下线,并提升其中一个Secondary作为Primary. 整个过程对业务透明,同时也大大降低 ...

  5. 更改maven中央仓库

    前言 1.由于原生的中央仓库 http://repo1.maven.org/maven2/,有一些包不在里面,目前流行的仓库有 http://mvnrepository.com/ 2.找出连接 2.1 ...

  6. K - Kia&#39;s Calculation (贪心)

    Kia's Calculation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  7. wm_concat函数的排序问题

    wm_concat在行转列的时候非常有用,但在行转列的过程中的排序问题常常难以控制. 可见下面例子: 准备测试表: drop table t; create table t (n number,m n ...

  8. for(var i=1;i&lt;=3;i++){ setTimeout(function(){ console.log(i); },0); };答案:4 4 4。

    看面试题时,发现了一道较为经典的面试题,代码如下 for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); },0); }; / ...

  9. webview中事件的用法

    封装 MBProgressHud ==================================== #import "MBProgressHUD.h" @interface ...

  10. golang 如何判断变量的类型

    本文介绍两种用于判断变量类型的方式. 方法一 package main import ( "fmt" ) func main() { v1 := "123456" ...