HTML5应用缓存机制

首先先上一张图：

用360浏览器的用户对这张图应该都是耳熟能详了吧，没错，当网络不通畅时使用360浏览器，便会有这张图弹出来。为什么没有网络还能弹出这一副画面呢？这就关乎HTML5的应用缓存机制了。

那什么是应用缓存机制呢？

应用缓存，是专门从浏览器的缓存中分出一块缓存区用于缓存数据，从而在离线状态下也能读取和使用该数据，这就是应用缓存，或者说叫appcache

怎么使用应用缓存？

首先，我们需要新建一个自定义的清单文件（manifest file），在这里我先将其命名为"cache_manifest"

然后其中的具体代码格式见下：

CACHE MANIFEST
# version1
CACHE:
# 这里放直接缓存的文件
NETWORK:
# 这里放的文件不缓存，不能离线读取，只能在线读取
FALLBACK:
# 这里放备份文件

<1>首先在开头必须声明CACHE MANIFEST这一行代码（必需）

<2>可用“#”符号进行注释

<3>具体内容可分为三块：

• CACHE:这里放的是需要直接缓存的文件
• NETWORK:这里放的文件不缓存，不能离线读取，只能在线读取
• FALLBACK:  这里放备份文件,比如页面无法访问时的回退页面（ 404 页面）

<4>放置的文件可以是js文件，css文件，html文件，也可以是各种格式的图片等，如下：

CACHE MANIFEST
# version1
CACHE:
img/0.jpg
index.html
js/task.js
css/mycss.css
NETWORK:  

FALLBACK:  

<5>怎么使用上面缓存清单文件（manifest file）呢？只要在当前的html的manifest属性里附加上你编写的缓存清单文件就可以啦，

  比如我写的就是：

<html manifest="cache_manifest">

下面我具体演示一下：

这里有两张在云端的图片，第一张地址是http://cherry037.github.io/task7/images/middle-left.jpg（在此称之为男子西装图吧）

第二张图地址是：http://chenbujuan.github.io/IFE-FirstStage-Task7/images/pic08.jpg（在此称之为黄衣女人图吧）

我的清单缓存文件名称为cache_manifest

CACHE MANIFEST
# version1
CACHE:
http://cherry037.github.io/task7/images/middle-left.jpg
NETWORK:
http://chenbujuan.github.io/IFE-FirstStage-Task7/images/pic08.jpg
FALLBACK:
# 这里放备份文件

HTML页面代码如下：

<!DOCTYPE html>
<html manifest="cache_manifest">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
          <img src="http://cherry037.github.io/task7/images/middle-left.jpg"  style="width:400px;height:200px;"/>
          <img src="http://chenbujuan.github.io/IFE-FirstStage-Task7/images/pic08.jpg"  style="width:400px;height:400px;"/>
    </body>
</html>

当网络状态联通时，demo如下，两张图片都能正常显示：

当我开启飞行模式，离线状态开启时，demo如下，“男人西装图”仍然能正常显示，说明通过缓存清单文件它已经被成功缓存起来了，而“黄衣女人图”则因为被设置为不缓存所以显示为一张默认的图片了