先说说浏览器缓存数据的作用和优缺点：
Web缓存存在于服务器和客户端之间。Web缓存密切注视着服务器-客户端之间的通信，监控请求，并且把请求输出的内容（例如html页面、 图片和文件）另存一份；然后，如果下一个请求是相同的URL，则直接使用保存的副本，而不是再次请求源服务器。
优点：使用Web缓存的好处是显而易见的
减少网络延迟，加快页面打开速度--缓存比源服务器离客户端更近，因此，从缓存请求内容比从源服务器所用时间更少，缓存的使用能够明显加快页面打开速度，达到更好的体验。
降低服务器的压力--给网络资源设定有效期之后，用户可以重复使用本地的缓存，减少对源服务器的请求，间接降低服务器的压力。同时，搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率，也能有效降低服务器的压力。
减少网络带宽损耗--无论对于网站运营者或者用户，带宽都代表着金钱,当Web缓存副本被使用时，只会产生极小的网络流量，可以有效的降低运营成本。
缺点：
缓存没有清理机制--这些缓存的文件会永久性地保存在机器上，在特定的时间内，这些文件可能是帮了你大忙，但是时间一长，我们已经不再需要浏览之前的这些网页，这些文件就成了无效或者无用的文件，它们存储在用户硬盘中只会占用空间而没有任何用处，如果要缓存的东西非常多，那就会撑暴整个硬盘空间。
给开发带来的困扰--明明修改了样式文件、图片、视频或脚本，刷新页面或部署到站点之后看不到修改之后的效果。
h5设置应用缓存的用法：
第一步：
设置 .appcache为后缀的文件名称 例如03.appche
第二步：
再建立好的文件夹中第一行写入（固定写法）
CACHE MANIFEST
第三步：
然后在第一行之后依次写入：
(需要缓存的文件) CACHE:文件路径；
(不需要缓存的文件) NETWORK:文件路径；
（当前页面无法访问时，回退的页面） FALLBACK:文件路径；
第四步：
在html页面中引入咱们的文件 manifest是固定写法:
完毕！--------------------------------------
注意文件缓存和h5的 sessionStorage localStorage是两码事 这个属于web存储 而appcache是属于应用存储 用于存储文件资源 图片之类的 而session可以简记为是cookie的升级版！不要弄混！！！浏览器缓存数据的用法及缓存的优缺点
原文：http://www.cnblogs.com/2016-zy-3258/p/6390973.html
