HTML5离线缓存

离线缓存applicationCache缓存第一次加载后的数据，如果缓存没有被清除，下次可以在没有网络的情况下加载。使用1.使用manifest属性引入.appcache文件。每个指定清单的页面都会在用户访问时被缓存。如果没有指定manifest属性，页面将不会被缓存（除非在manifest文件中直接指定）推荐的manifest文件扩展名是：.appcache2.写demo.appcache文件CACHEMANIFEST必填，下面写需要缓存的文件，第一次下载后会缓存NETWORK:下面的文件永远不会缓存，离线不可用可以用星号表示全部otherresources/filesrequiretheInternetCONNECTIONNETWORK:*FALLBACK:如果无法建立互联网连接，将/html5/目录中的所有文件替换为“offline.html”，第一个url是资源，第二个是备用缓存MANIFESTlogo.pngmain.jsNETWORK：索引。cssFALLBACK:#访问失败后重定向/html5//404.html至此，离线缓存缓存状态window.applicationCache.status查看缓存当前状态0==UNCACHED===Uncached1==IDLE===Idle(缓存是最新状态）2==CHECKING===正在检查3==DOWNLOADING===正在下载4==UPDATEREADY===更新就绪5==OBSOLETE===缓存过期相关方法1.applicationCache.update()主动更新缓存//使用定时器定时自动更新缓存setInterval(function(){applicationCache.update();},10000);2.swapCache()所有请求都从新的缓存中获取注意：这个不会重新加载应用：所有加载的html文件、图片、脚本等资源不会发生变化，但后续请求会从最新的缓存中获取。这样会导致“版本混乱”，所以一般不推荐，除非应用程序设计良好，保证这种方式没有问题。缓存相关事件1.updateready当有新的缓存并更新时触发该事件window.applicationCache.onupdateready=function(){alert("缓存更新完成");},false);2.progress新增了Caching，在下载过程中，会间歇性触发事件，包括：loaded和total。loaded表示当前加载的文件，total是需要更新的文件总数applicationCache.onprogress=function(e){alert(applicationCache.status);//3...3表示下载},false);3.cached当下载完成，第一次将应用下载到缓存时触发4.updadery当更新完成，下载完成，缓存中的应用更新时触发该事件，用户仍然可以查看旧版本的应用程序5。error浏览器离线，检查清单列表失败。当未缓存的应用程序引用不存在的清单文件时，也会触发此事件。6.obsolete缓存应用引用不存在的manifest文件时会触发7.checking是checking，每次加载带有manifest属性的html文件，浏览器都会触发8.downloading是下载9.noupdatecheckupdate完结了，不用更新了