每日一题（5）

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

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

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

• 如何使用：
  。在页面头部像下面一样加入一个manifest的属性；
  。在cache.manifest文件编写离线存储的资源；
  。在离线状态时,操作window.applicationCache 进行需求实现；

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

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

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

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