2022-09-19HTML00
请注意,本文编写于 580 天前,最后修改于 580 天前,其中某些信息可能已经过时。

HTML5 的离线储存怎么使用,工作原理能不能解释一下?

 在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。

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

 如何使用:

 (1)创建一个和 html 同名的 manifest 文件,然后在页面头部像下面一样加入一个 manifest 的属性。

     <html lang="en" manifest="index.manifest">

 (2)在如下 cache.manifest 文件的编写离线存储的资源。
   	CACHE MANIFEST
   	#v0.11
   	CACHE:
   	js/app.js
   	css/style.css
   	NETWORK:
   	resourse/logo.png
   	FALLBACK:
   	/ /offline.html

     CACHE: 表示需要离线存储的资源列表,由于包含 manifest 文件的页面将被自动离线存储,所以不需要把页面自身也列出
            来。

     NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些
              资源。不过,如果在 CACHE 和 NETWORK 中有一个相同的资源,那么这个资源还是会被离线存储,也就是说 C
              ACHE 的优先级更高。

     FALLBACK: 表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果访问根目录下
               任何一个资源失败了,那么就去访问 offline.html 。

 (3)在离线状态时,操作 window.applicationCache 进行离线缓存的操作。


 如何更新缓存:

 (1)更新 manifest 文件
 (2)通过 javascript 操作
 (3)清除浏览器缓存

 注意事项:

 (1)浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)。
 (2)如果 manifest 文件,或者内部列举的某一个文件不能正常下载,整个更新过程都将失败,浏览器继续全部使用老的缓存。
 (3)引用 manifest 的 html 必须与 manifest 文件同源,在同一个域下。
 (4)FALLBACK 中的资源必须和 manifest 文件同源。
 (5)当一个资源被缓存后,该浏览器直接请求这个绝对路径也会访问缓存中的资源。
 (6)站点中的其他页面即使没有设置 manifest 属性,请求的资源如果在缓存中也从缓存中访问。
 (7)当 manifest 文件发生改变时,资源请求本身也会触发更新。

详细的使用可以参考: 《HTML5 离线缓存-manifest 简介》 《有趣的 HTML5:离线存储》

浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢?

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

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

本文作者:前端小毛

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!