h5的缓存机制

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文件，创建应用缓存。

转自:https://www.cnblogs.com/leyan/p/8963193.html