HTML5——离线存储

在文档中开启应用缓存其实很简单,只需要在html标签加入manifest属性以及指定文件路径即可,像这样:

<html manifest="/cache.manifest">

cache.manifest可以看做是一个文本文件,这个文件是用来指定需要浏览器缓存的资源(当然,定义了manifest属性的文档是会缓存的,不用指定),接下来看一个示例(怎么定义manifest文件):

CACHE MANIFEST

#这个是注释

CACHE:
stylesheet/style.css
iamges/icon.png

NETWORK:
http://www.baidu.com/

FALLBACK:
/ /index.html
images/ images/error.png
  • manifest文件里边的CACHE MANIFEST以及CACHE是必须要有的。
  • CACHE后定义要缓存的文件。
  • NETWORK表示只在有网的情况下才能访问的资源,可以不定义NETWORK
  • FALLBACK表示当出现不可访问的资源时使用后备资源进行访问(两种资源用空格隔开,前一部分表示资源可用时的路径,第二部分是备用资源的路径)

当缓存了资源以后,我们肯定是要更新缓存资源的,更新缓存资源的方式有三种:

  • 修改manifest文件,当浏览器检测到现在加载的manifest文件内容和之前的不一样,那么就会重新下载整个缓存列表。因为manifest支持注释,可以通过更改manifest文件的注释来实现(把版本号加到注释里也行啊)
  • 通过API接口来进行缓存控制。
  • 在浏览器中清除缓存数据。

接下来主要讲讲第二种方式。可以通过JavaScript的window.applicationCache对象来控制离线缓存:

  • 调用这个对象的update(),浏览器就会先重新获取manifest文件,如果manifest文件有变化,就会把需要缓存的资源下载下来,当然只是下载下来了,还没有替换原来的缓存。
  • 调用swapCache()就可以把原来的缓存替换为新的缓存资源。怎么判断资源是否下载完毕了呢,可以采用window.applicationCache对象的status属性。

接下来给出一个使用API接口来进行缓存控制的栗子:

function getCacheStatus(){
    var cache=window.applicationCache;
    switch(cache.status){
        case cache.UNCACHED:
        return 'UNCACHED';
        break;

        case cache.IDLE:
        return 'INLE';
        break;

        case cache.CHECKING:
        return 'CHECKING';
        break;

        case cache.DOWNLOADING:
        return 'DOWNLOADING';
        break;

        case cache.UPDATEREADY:
        return 'UPDATEREADY';
        break;

        case cache.OBSOLEFT:
        return 'OBSOLEFT';
        break;

        default:
        return 'UNKNOWN';
        break;
    }
}

UPDATEREADY状态有一个事件:updateready,可以利用这个事件来确定什么时候调用update方法和swapCache方法:

//必须在load之后再监听
window.addEventListener('load',function(e){
    window.applicationCache.addEventListener('updateready',function(e){
        if(getCacheStatus=='UPDATEREADY'){
            window.applicationCache.swap();
            window.location.reload();//这一步最好问一下用户的意见
        }else{
            //文件没有更新时采取的措施
            }
    },false)    
},false)

如果自己懒得写manifest文件,那么也可以使用在线工具生成manifest文件(这些工具自己找吧,不推荐了)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值