星空网 > 软件开发 > 网页设计

HTML5的离线储存

在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。
        原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。


        如何使用:
        1、页面头部像下面一样加入一个manifest的属性;

<!DOCTYPE HTML><html manifest = "cache.manifest">...</html>

 


        2、在cache.manifest文件的编写离线存储的资源;
          

 CACHE MANIFEST      #v0.11      CACHE:      js/app.js      css/style.css     .NETWORK:      resourse/logo.png      FALLBACK:      / /offline.html

 


        3、在离线状态时,操作window.applicationCache进行需求实现。

浏览器怎么解析manifest

那么浏览器是怎么对离线的资源进行管理和加载的呢?这里需要分两种情况来讨论。

  • 在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根 据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然 后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的 资源并进行离线存储。

  • 离线的情况下,浏览器就直接使用离线存储的资源。

这个过程中有几个问题需要注意。

  • 如果服务器对离线的资源进行了更新,那么必须更新manifest文件之后这些资源才能被浏览器重新下载,如果只是更新了资源而没有更新manifest文件的话,浏览器并不会重新下载资源,也就是说还是使用原来离线存储的资源。

  • 对于manifest文件进行缓存的时候需要十分小心,因为可能出现一种情况就是你对manifest文件进行了更新,但是http的缓存 规则告诉浏览器本地缓存的manifest文件还没过期,这个情况下浏览器还是使用原来的manifest文件,所以对于manifest文件最好不要设 置缓存。

  • 浏览器在下载manifest文件中的资源的时候,它会一次性下载所有资源,如果某个资源由于某种原因下载失败,那么这次的所有更新就算是失败的,浏览器还是会使用原来的资源。

  • 在更新了资源之后,新的资源需要到下次再打开app才会生效,如果需要资源马上就能生效,那么可以使用window.applicationCache.swapCache()方法来使之生效,出现这种现象的原因是浏览器会先使用离线资源加载页面,然后再去检查manifest是否有更新,所以需要到下次打开页面才能生效。



    详细的使用请参考:[有趣的HTML5:离线存储](http://segmentfault.com/a/1190000000732617)HTML5的离线储存




原标题:HTML5的离线储存

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

数据报告|东南亚女性群体消费趋势洞察报告(上):https://www.ikjzd.com/articles/119943
2020内功修炼之亚马逊SP广告精密型优化教程(1):https://www.ikjzd.com/articles/119945
亚马逊又出新政!暂停接收新客户订单!:https://www.ikjzd.com/articles/119946
如何通过折扣网站Togetho推广产品!:https://www.ikjzd.com/articles/119947
12款爆品预测:家居、服饰、宠物……总有一个能成爆款!:https://www.ikjzd.com/articles/119948
亚马逊平台上传单个产品全教程【图解】:https://www.ikjzd.com/articles/11995
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流