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