前端3+1（Day4）

前端3+1（Day4）

HTML5离线存储

是什么：

可以将站点的一些文件存储在本地。在没有网络的时候，可以访问到已缓存的对应站点页面。即使在有网络的时候，浏览器也会默认去优先使用已离线的存储文件，返回一个200头

原理：

HTML5离线存储是基于新建一个.manifest文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，资源就会被存储下来，当网络处于离线状态，浏览器就会显示。

什么是.manifest文件

就是用来存储缓存文件的文件夹

好处：

  • 离线浏览：当网络断开时，可以访问

  • 访问速度快：文件缓存在本地，每次不需从网络上请求

  • 稳定性：做了缓存，网络故障时，依然可以进行本地缓存

使用方法：

  • 在本地文件夹里创建一个cache.manifest配置文件，并在html里设置manifest属性

    <!DOCTYPE HTML>
<html manifest = 'cache.manifest'>

</html>

    cache.manifest文件

    CACACHECHE MANIFEST
#v0.11

CACHE:
需要离线缓存的文件

NETWORK:
有资源才可以访问
FALLBACK：
如果第一个资源加载失败，那么使用第二个

    浏览器解析manifest文件：

    当浏览器发现html头部有manifest时，它会去请求manifest文件，

    第一次：去下载里面全部的资源，

    再次访问，如果没有更新，那么就直接加载离线文件

    再次访问，如果有更新，那么就下载新的manifest文件，重新加载所有的离线资源

    离线访问：直接加载离线缓存的资源

posted @ 2022-01-07 13:43  summer在writing  阅读(29)  评论(0)  编辑  收藏  举报