h5的缓存机制

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

 1、LocalStorage

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

        API基本使用方法：

         一、localStorage.setItem() 存储

         二、localStorage.getItem() 获取数据，其中使用localStorage.valueOf()获取所有数据

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

         四、localStorage.clear()清空所有数据，localStorage.length 获取本地存储数据数量

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

2、SessionSotrage

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

       SessionStorage与localStorage 的使用方法类似

 3、cookie

       cookie与sessionStorage、localStorage仍是有很大不一样的。

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

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

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

        四、做用域不一样，sessionstorage不在不一样浏览器中共享，即便是同一页面也不支持。而localstorage在全部同源窗口中都是共享的，一样，cookie在全部同源窗口中也是能够共享的。

        五、cookie的数据还有路径的概念，能够经过设置限制cookie只属于某个路径

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

  4、webstorage 的好处

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

         二、快速显示数据：从本地获取数据比经过网络从服务器获取数据效率更高，所以网页显示也比较快；

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

         四、不影响网络效能：由于webstorage只做用在客户端的浏览器，不会占用频宽。

  5、离线存储

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