HTML5离线缓存

一,离线缓存
    文档的本地缓存,在断网的情况下依旧能够访问,
    但是不能访问网络接口
    1,检测支持性
        if(window.applicationCache){
            alert('支持');
        }else{
            alert('不支持');
        }
    2,引入文件
        name.manifest
        这是一个配置缓存的文件
        CACHE:将制定的文件全部缓存到本地
            NETWORK:将制定的文件总是从网络下载
            FAKKBACK:制定的文件如果找不到,会被重新定位到这个地址
            CACHE MANIFEST 开头
            #Cache Manifest v3.01
            #:表示注释
            引入缓存文件方式:
                在html标签中使用:
                    manifest='name.manifest';
    3,工作原理
        见图片
    4,缓存状态
        applicationCache.status
            0:没有缓存
            1:空闲(缓存为最新状态)
            2:检查中
            3:下载中
            4:更新就绪
            5:缓存过期
    5,缓存更新
        applicationCache.update();
    6,updateready 事件
        当有新的缓存,并跟新完成以后,会触发这个时间
        applicationCache.addEventListener('updateready',function(){})
    7,progress 事件
        当有新的缓存时,并处于正在下载过程中,会不断的触发这个事件
        event.totle:一共需要加载多少文件
        applicationCache.addEventListener('progress',function(event){})
    8,其他事件:
        checking事件:正在检查
        downloading事件:正在下载
        updateready事件:更新完成
        obsolete:缓存过期
        cached:空闲,缓存为最新状态
        error:错误
        noupdate:检查更新错误结束,没有需要更新的内容
    9,注意事项
        1)浏览器对缓存数据的容量限制是不一样的(一般浏览器显示每个站点缓存5m)
        2)如果manifest文件或者内部列举的某一个文件不能正常下载,整个缓存的更新都会失败,
        浏览器继续使用全部的老文件(原来缓存的文件)
        3)引入manifest文件的html文件必须和manofest文件同源,在同一个域下
        4)FALLBACK中的文件必须与manifest文件同源
        5)如果文件被缓存了,当使用本地绝对路径的file协议打开时也会打开缓存文件
        6)站点中其他文件没有缓存,但是如果使用到的资源在缓存中,也会从缓存中访问
        7)当manifest文件发生改变时,资源请求本身也会触发更新
        8)如果离线存储资源有更新,但是在第一次打开该文件时还会使用老版本

下面是案例

<!DOCTYPE html>
<html lang="en" manifest="test.manifest">引入文件
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/test.css">
</head>
<body>
	<div class="box">今天天气不好</div>
	<img src="images/skin.gif" alt="">
</body>
<script src="js/test.js"></script>
<script type="text/javascript">

setInterval(function() {
console.log(applicationCache.status);
},3000)
</script>
</html>

 

test.manifest文件内容

CACHE MANIFEST
#Cache Manifest v3.01

CACHE:
02_离线缓存测试.html

NETWORK:
*
FALLBACK:
/ error.html
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值