h5的缓存机制

H5的缓存，大概有localstorage、sessionstorage、cookie和manifest。

一、LocalStorage

LocalStorage是永久性的本地缓存，存储在客户端的浏览器上，除非主动删除，是不会过期的。LocalStorage采用的是键值对的方式进行存储，存储方式只能是字符串。存储内容可以用图片、json、样式、脚本等。

API基本使用方法：

1、localStorage.setItem() 存储

2、localStorage.getItem() 获取数据，其中使用localStorage.valueOf()获取全部数据

3、localStorage.removeItem(key) 删除数据

4、localStorage.clear()清空全部数据，localStorage.length 获取本地存储数据数量

5、localStorage.key(N)获取第N个数据的key键值

二、SessionSotrage

SessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且会话结束，窗口关闭后，数据就会消失。是一种会话级别的存储。

SessionStorage与localStorage 的使用方法相似

三、cookie

cookie与sessionStorage、localStorage还是有很大不同的。

1、cookie数据始终在同源的http请求中携带，cookie在浏览器和服务器端来回传递，而localstorage和sessionstorage不会自动把数据传送给服务器端，仅在本地保存。

2、存储大小限制不同，cookie的存储数据大小要求不能超过4k,每次的http请求都会携带cookie,所以保存的数据需要比较小。sessionstorage和localstorage存储数据大小限制比cookie要大，可以达到5M或者更大，不同浏览器设置可能不同。

3、数据生命周期。cookie的生命周期一般在其设置的过期时间之前有效。而sessionstorage仅在关闭窗口前有效，localstorage持久有效，直到手动删除。

4、作用域不同，sessionstorage不在不同浏览器中共享，即使是同一页面也不支持。而localstorage在所有同源窗口中都是共享的，同样，cookie在所有同源窗口中也是可以共享的。

5、cookie的数据还有路径的概念，可以通过设置限制cookie只属于某个路径

6、webstorage 支持事件通知机制，可以将数据更新的通知发送给监听者。

四、webstorage 的好处

1、减少网络流量：使用webstorage将数据保存在本地中，减少不必要的请求。

2、快速显示数据：从本地获取数据比通过网络从服务器获取数据效率更高，因此网页显示也比较快；

3、临时存储：很多时候数据只需在用户浏览一组页面期间使用，关闭窗口后数据就会丢失，使用sessionstorage 比较方便；

4、不影响网络效能：因为webstorage只作用在客户端的浏览器，不会占用频宽。

五、离线存储

H5中添加了离线缓存，通过创建cache mainfest文件，创建应用缓存。