码迷,mamicode.com
首页 > 其他好文 > 详细

离线存储

时间:2015-06-09 11:43:22      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:

一、支持性检测

if(window.applicationCache){
    //浏览器支持离线存储
}else{
    //浏览器不支持离线存储
}

    支持度:IE9及以下版本不支持
二、manifest文件
  • 引入manifest文件:
    • <html manifest="app.manifest">
  • manifest文件格式(注释:#开头):
  • CACHE MANIFEST
    #第一行必须为cache manifest
    CACHE:
    #需要缓存的都放在CACHE:下面
    css/b.css
    
    #需要总是从网络请求的放在NETWORK:下面
    css/a.css
    
    FALLBACK
    #访问失败后,重定向
    css/c.css css/a.css
    • CACHE:将指定的文件全部缓存到本地
    • NETWORK:指定的文件总是从网络上请求最新的
    • FALLBACK:指定的文件若是找不到,会被重定向到新的地址
三、状态
  • applicationCache.status
    • 0   ===    未缓存
    • 1   ===    空闲(缓存为最新状态)
    • 2   ===    检查中
    • 3   ===    下载中
    • 4   ===    更新就绪
    • 5   ===    缓存过期
 
四、update:主动更新缓存
//每隔5秒检查一次更新
    setInterval(function(){
        applicationCache.update();
    },5000);
 
五、事件
updateready事件:当有新的缓存,并更新完以后,会触发此事件
技术分享
 
progress事件:当有新的缓存,并处于正在下载的过程中时,会不断触发此事件。
  • progress中的event对象包含:loaded和total。loaded代表当前已经加载完成的文件,total为总共需要更新的文件数。
技术分享技术分享技术分享
 
其他事件:
  • checking事件:正在检查
  • downloading事件:正在下载
  • updatereadey事件:更新完成
  • obsolete事件:缓存过期
  • cached事件:空闲,缓存为最新状态
  • error事件:报错
  • noupdate事件:检查更新结束,没有需要更新。

离线存储

标签:

原文地址:http://www.cnblogs.com/pan-hello/p/4562831.html

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