HTML5的离线储存

时间 2019-12-04

标签 html5 html 离线储存栏目 HTML5 繁體版

原文原文链接

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

       如何使用：
       一、页面头部像下面同样加入一个manifest的属性；css

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

二、在cache.manifest文件的编写离线存储的资源；
html

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

三、在离线状态时，操做window.applicationCache进行需求实现。segmentfault

浏览器怎么解析manifest

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

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

这个过程当中有几个问题须要注意。cookie

若是服务器对离线的资源进行了更新，那么必须更新manifest文件以后这些资源才能被浏览器从新下载，若是只是更新了资源而没有更新manifest文件的话，浏览器并不会从新下载资源，也就是说仍是使用原来离线存储的资源。网络
对于manifest文件进行缓存的时候须要十分当心，由于可能出现一种状况就是你对manifest文件进行了更新，可是http的缓存规则告诉浏览器本地缓存的manifest文件还没过时，这个状况下浏览器仍是使用原来的manifest文件，因此对于manifest文件最好不要设置缓存。app
浏览器在下载manifest文件中的资源的时候，它会一次性下载全部资源，若是某个资源因为某种缘由下载失败，那么此次的全部更新就算是失败的，浏览器仍是会使用原来的资源。code
在更新了资源以后，新的资源须要到下次再打开app才会生效，若是须要资源立刻就能生效，那么可使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的缘由是浏览器会先使用离线资源加载页面，而后再去检查manifest是否有更新，因此须要到下次打开页面才能生效。

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