HTML(3) -- html5的离线存储

哈哈哈哈多好听
42 阅读2分钟
一. 离线存储

离线存储： 指的是在用户没有与因特网连接时，也可以通过离线存储来正常访问站点或应用；在用户与因特网连接时，更新用户机器上的缓存文件！！

原理：

HTML5的离线存储是基于一个manifest文件(缓存清单文件，后缀为. appcache)的缓存机制(不是存储技术)，通过这个文件上的清单解析离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态时，浏览器会通过被离线存储的数据进行页面展示。

二. 使用方法
  • 在 html 文件中 ，把 < html /> 元素的 manifest 属性设置为 manifest文件名 ，如下：

1973.png

  • 配置 manifest 文件

     - 扩展名为 .appcache 的文件
 - 该文件分为三个部分：
              - CACHE : 在此列出的文件会在首次下载后进行缓存！！
              - NETWORK ：在此列出的文件不会被下载，且只有在联网的情况下才能访问
              - FALLBACK ：在此列出的文件会在页面无法访问时进行代替

1974.png

  • 操作window.applicationCache进行需求实现
注意：
  1. 如果 manifest 文件内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器会继续全部使用老的缓存！！
  2. manifest 中列出的文件都要同源，在一个域下
  3. 即使某些html页面没有设置 manifest 属性，如果其在列出的缓存文件中，那么对它进行请求时，也会直接从缓存中访问！！！
三. 浏览器是如何实现对 HTML5 的离线存储资源进行管理和加载的
  • 在线（连网）的情况下：

浏览器发现 html 标签内有 manifest 属性，就会请求 manifest 文件。如果是第一次访问页面，那么浏览器会根据 manifest 文件下的内容下载相应的资源并进行离线缓存；如果已经访问过页面了，(说明已经进行过离线存储了)，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件发生改变，就会重新根据列出的需要缓存的文件进行下载缓存！！

  • 离线的情况下：

浏览器会直接使用离线存储的资源！！

avatar
文章
阅读
粉丝