HTML 5离线存储

applicationCache

离线应用是什么？
乘坐飞机、手机信号弱、去演讲的时候，可能没有网络，这个时候就可以采用离线应用。
离线存储如何工作的？

离线存储的好处？
没网的时候，可以正常访问
快速相应页面，不必用多个HTTP占用资源带宽
缓存的可以是任何文件

搭建离线应用程序
①服务器设置头信息 :
AddType text/cache-manifest .manifest
② html标签加 :
manifest=“xxxxx.manifest”

<!DOCTYPE html>
<html manifest="mv.manifest">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        //console.log(applicationCache);

        var ac = applicationCache;

        //console.log(ac.status);

        ac.onchecking = function() {
            //检测缓存清单文件
            console.log('checking', '检测缓存清单文件');
        }

        ac.onnoupdate = function() {
            console.log('noupdate', '清单文件没有更新');
        }

        ac.ondownloading = function() {
            console.log('downloading', '开始下载缓存清单文件');
        }

        ac.onprogress = function() {
            console.log('progress', '正在下载缓存清单中的文件')
        }

        ac.oncached = function() {
            console.log('cached', '缓存清单文件更新完成');
        }

        ac.onupdateready = function() {
            ac.swapCache();
            //location.reload();
            console.log('updateready', '缓存准备就绪');
        }

        ac.onobsolete = function() {
            console.log('obsolete', '清单文件.manifase不存在');
        }

        ac.onerror = function() {
            console.log('error', '出错了');
        }

    </script>
</head>
<body>
    这是1.html文件内容
</body>
</html>

③写manifest文件 : 离线的清单列表
先写 : CACHE MANIFEST
FALLBACK : 第一个网络地址没获取到，就走第二个缓存的
NETWORK ：无论缓存中存在与否，均从网络获取

CACHE MANIFEST

CACHE:
# 样式
    http://file.234g.cn/css/reset_20150710.css
    http://pic.234g.cn/css/Found2015-9-21.css?VM

# 脚本
    http://file.234g.cn/js/appframework.min.2.1.0.js

#图片
    http://pic.234g.cn/img/game-1.jpg@200w_200h_1e_1c_50Q
    http://pic.234g.cn/img/game-2.jpg@200w_200h_1e_1c_50Q
    http://pic.234g.cn/img/game-3.jpg@200w_200h_1e_1c_50Q
    http://pic.234g.cn/img/go_1.png@200w_1e_1c_50Q.png
    http://pic.234g.cn/img/yellow.jpg
    http://pic.234g.cn/img/go_2.png@200w_1e_1c_50Q.png
    http://pic.234g.cn/img/red.jpg
    http://pic.234g.cn/img/clock.png
    http://pic.234g.cn/img/search.png?wq

NETWORK:
    *

FALLBACK

如何让APACHE支持.htaccess

1.打开httpd.conf

　　将Options FollowSymLinks

　　　AllowOverride None

改为

　　Options FollowSymLinks

　　AllowOverride All

2.去掉下面的注释

LoadModule rewrite_module modules/mod_rewrite.so

3.从启apache服务

在js中提供了一个全局applicationCache对象
这个对象下提供了一些属性和方法来让我们去操作applicationCache

appliactionCache
   .stauts : 状态

事件：
   checking : 检测缓存是否需要更新的时候触发
   noupdate : 检测以后，发现没有更新的缓存文件信息的时候触发
   downloading : 检测有更新的时候触发
   progress : 更新缓存的时候触发
   cached : 更新缓存完毕的时候触发
   updateready : 所有缓存已经就绪的时候触发
   obsolete : manifest的请求出现404或者410错误，应用程序缓存被取消的时候触发
   error : 更新出错的时候触发

方法：
   update() ：发起应用程序缓存下载进程
   abort() ：     取消正在进行的缓存下载
   swapCache() ：切换成本地最新的缓存环境