HTML5——离线存储

最新推荐文章于 2024-07-19 10:24:06 发布

sdu_jsfeng

最新推荐文章于 2024-07-19 10:24:06 发布

阅读量1.9k

点赞数

分类专栏： HTML5 离线缓存

本文链接：https://blog.csdn.net/sdu_jsfeng/article/details/82155041

版权

HTML5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

离线缓存

1 篇文章 0 订阅

订阅专栏

在文档中开启应用缓存其实很简单，只需要在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文件（这些工具自己找吧，不推荐了）。