Web Storage是H5引入的一个重要的功能,在前端开发的过程中会经常用到,它可以在客户端本地存储数据,类似cookie,但其功能却比cookie强大的多。cookie的大小只有4Kb左右(浏览器不同,大小也不同),而web Storage的大小有5MB。
1、localStorage
localStorage的生命周期是永久性的;假若使用localStorage存储数据,即使关闭浏览器,也不会让数据消失,除非主动的去删除数据,在所有同源窗口中都是共享的。
2、sessionStorage
sessionStorage 的生命周期是在浏览器关闭前;在整个浏览器未关闭前,其数据一直都是存在的,即使刷新页面或进入同源另一页面,数据仍然存在。
Web Storage带来的好处:
减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。
快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示。
临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage非常方便。
Web Storage API提供的方法有以下几种:
// 保存数据,以键值对的方式储存信息 setItem (key, value) // 获取数据,将键值传入,即可获取到对应的value值 getItem (key) // 删除单个数据,根据键值移除对应的信息 removeItem (key) // 删除所有的数据 clear () // 取某个索引的key key (index)