在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
        原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：
        1、页面头部像下面一样加入一个manifest的属性；

<!DOCTYPE HTML>

<html manifest = "cache.manifest">

...

</html>

2、在cache.manifest文件的编写离线存储的资源；

 CACHE MANIFEST

            #v0.11

            CACHE:

            js/app.js

            css/style.css

            NETWORK:

            resourse/logo.png

            FALLBACK:

            / /offline.html

3、在离线状态时，操作window.applicationCache进行需求实现。

浏览器怎么解析manifest

那么浏览器是怎么对离线的资源进行管理和加载的呢？这里需要分两种情况来讨论。

  • 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根 据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然 后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的 资源并进行离线存储。

  • 离线的情况下，浏览器就直接使用离线存储的资源。

这个过程中有几个问题需要注意。

  • 如果服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。

  • 对于manifest文件进行缓存的时候需要十分小心，因为可能出现一种情况就是你对manifest文件进行了更新，但是http的缓存 规则告诉浏览器本地缓存的manifest文件还没过期，这个情况下浏览器还是使用原来的manifest文件，所以对于manifest文件最好不要设 置缓存。

  • 浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。

  • 在更新了资源之后，新的资源需要到下次再打开app才会生效，如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的原因是浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。

详细的使用请参考：[有趣的HTML5：离线存储](http://segmentfault.com/a/1190000000732617)HTML5的离线储存

HTML5的离线储存的更多相关文章

  1. 6，html5的离线储存怎么用

    6,html5的离线储存怎么用 客户端:(百科:或称为用户端,是指与服务器相对应,为客户提供本地服务的程序.除了一些只在本地运行的应用程序,一般安装在客户机上,需要与服务端配合运行) 在用户没有和因特 ...

  2. 浏览器如何对HTML5的离线储存资源进行管理和加载

    在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储.如果已经访 ...

  3. 转 html5离线储存,application cache,manifest使用体验

    html5离线应用application cache 最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求 ...

  4. HTML5 的web储存: localStorage & sessionStorage

    早期的浏览器使用cookie储存,HTML5新增web储存,包括:localStorage 和 sessiongStorage; localStorage:可以永久储存: sessionStorage ...

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

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

  6. HTML5：离线存储

    最近由于找工作一直没时间也没有精力更新博客,找工作真是一件苦逼的事情啊...不抱怨了,我们来看看HTML5的新特性---离线存储吧. 随着Web App的发展,越来越多的移动端App使用HTML5的方 ...

  7. 使用HTML5开发离线应用 - cache manifest

    HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线 ...

  8. HTML5的离线应用

    参考:有趣的HTML5:离线存储——segmentfault HTML5的离线存储 简介 HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个.通过浏览器访问Web App需要联网发送请 ...

  9. html5的离线存储问题集合

    HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很多,而且希望能集中 ...

随机推荐

  1. [原创]VS2013 EF6连接MySql需要几步？

    精简的美丽...... 1.安装mysql server下载地址 http://cdn.mysql.com/Downloads/MySQL-5.6/mysql-5.6.21-winx64.zip注意: ...

  2. careercup-排序和查找 11.7

    11.7 有个马戏团正在设计叠罗汉的表演节目,一个人要站在另一人的肩膀上.处于实际和美观的考虑,在上面的人要比下面的人矮一点.轻一点.已知马戏团每个人的高度和重量,请编写代码计算叠罗汉最多能叠几个人. ...

  3. 第十一章 Function类型

    在ECMAScript中,Function(函数)类型实际上是对象.每个函数也是Function类型的实例,而且都与其它引用类型一样具有属性和方法.由于是函数对象,因此函数名实际上也是一个指向函数对象 ...

  4. Java设计模式10：设计模式之 值对象

    1. 场景和问题: 在Java程序中,需要在对象之间交互大量的数据,比如要为方法传入参数,也要获取方法的返回值,请问如何能更好的进行数据的交互? 2. 解决方案:      值对象 3. 值对象的本质 ...

  5. Java基础知识强化之网络编程笔记11：TCP之TCP协议上传文本文件

    1. TCP协议上传文本文件(客户端上传数据到服务器端) (1)客户端(上传数据到服务端) package cn.itcast_11; import java.io.BufferedReader; i ...

  6. ios存储 plist 偏好设置 自定义对象存储

    1,plist Plist注意:不能存储自定义对象 Plist:数组和字典,  如何判断一个对象能不能使用Plist,就看下有没有writeToFile 获取应用的文件夹(应用沙盒) NSString ...

  7. Android_Handler

    xml文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...

  8. Ant构建和部署项目(转)

    原文地址: http://www.blogjava.net/amigoxie/archive/2007/11/09/159413.html Ant是一个Apache基金会下的跨平台的构件工具,它可以实 ...

  9. 我、实战nginx+naxsi(WAF)之一

    差不多,一个星期多的时间都过去了.但是还是感觉时间过的太快,总是不禁的让人长叹一声,关于nginx和(naxsi)WAF这个问题,也算是只走出了第一步,在遇到了各种乱七八糟的错误之后总算是想要静下心来 ...

  10. Java队列实现

    队列数组实现:队列长度有限,但是考虑到平时一般都使用有界队列,这应该也不算是个缺点 public class Queue { private Object[] objs; private int he ...