前端3+1（Day4）

HTML5离线存储

是什么：

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

原理：

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

什么是.manifest文件

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

好处：

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

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

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

使用方法：

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

  cache.manifest文件

  CACACHECHE MANIFEST
  #v0.11
  
  CACHE:
  需要离线缓存的文件
  
  NETWORK:
  有资源才可以访问
  FALLBACK：
  如果第一个资源加载失败，那么使用第二个
  

  浏览器解析manifest文件：

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

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

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

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

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