html5主页缓存 web页面缓存

HTML5的5种存储方式详解

1、离线缓存（application cache）HTML5引入了应用程序缓存器，可对web进行缓存，在没有网络形况下使用，通过创建cache manifest文件，创建应用缓存。

创新互联公司是一家专业提供河间企业网站建设,专注与成都网站设计、成都网站制作、H5高端网站建设、小程序制作等业务。10年已为河间众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

2、h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主Domain污染。

3、HTML5 提供了两种在客户端存储数据的新方法：..两者都是仅在客户端（即浏览器）中保存，不参与和服务器的通信；localStorage - 没有时间限制的数据存储，第二天、第二周或下一年之后，数据依然可用。

4、按F12打开控制台，找到sessionStorage，会发现其是用键值对的方式存储数据的。localStorage跟sessionStorage类似，只是localStorage只要不删除就会永久存储在电脑上，而sessionStorage只要关闭了页面就没有了，这里小编就不再演示了。

html5的web存储中对于本地缓存是怎么解决的?

1、需要服务器。这里用tomcat服务器来讲解。首先要先把.manifest后缀的文件 的mine类型配置为text/cache-manifest。

2、html5的离线web应用的浏览器和服务器交互的过程要是没有缓存就需要每次交互都要实时接口调用，增加网络开销。

3、h5新增localStorage和sessionStorage两种用于把数据存储在本地的方法，前者可以将数据永久保存在本地，可手动删除。后者只能在本次浏览器启动时存储有效，关闭浏览器之后存储的数据会自动清空。

html5缓存的问题,如何正确设置

1、这是第二步，第三步，只要在html标签中加上manifest的位置就行了：html manifest=NAME.manifest 到这里，就可以实现简单的离线应用了。

2、写法：html manifest=/CacheFile/myApp.appcache myApp.appcache里面写了需要缓存的css、js的路径。

3、测试结果：如果把js放在index.html的body底部，那么就可以实现clock.js的app cache，但是clock.css是不行的。ff 版本 20 测试结果：只能实现cache.html本身的缓存。