码迷,mamicode.com
首页 > Web开发 > 详细

HTML 5离线存储

时间:2015-10-16 14:55:59      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:

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() : 切换成本地最新的缓存环境

HTML 5离线存储

标签:

原文地址:http://www.cnblogs.com/xiongcui/p/4885162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!