前端本地存储的方式目前有三种,分别是:cookie、localStorage、sessionStorage。
一、不同点
- 生命周期
cookie:可设置失效时间,没有设置的话,默认是关闭浏览器后失效
localStorage:除非被手动清除,否则将会永久保存
sessionStorage:仅在当前网页下有效,页面关闭会自动清除 - 存放数据
cookie:4KB左右
localStorage和sessionStorage:可以保存5MB的信息 - http请求
cookie:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题
localStorage和sessionStorage:仅在客户端(即浏览器)中保存,不参与和服务器的通信 - 易用性
cookie:需要程序员自己封装,原生的cookie接口不友好
localStorage和sessionStorage:原生接口可以接受,也可以再次封装来对Object和Array有更好的支持
二、应用场景
从安全性来说,因为每次http请求都会携带cookie信息,这样无形中浪费了宽带,所以cookie尽可能少的使用,另外cookie还需要指定作用域,不可以跨域调用,限制比较多。但是用来识别用户登录来说,cookie还是比storage更好用。其他情况下,可以使用storage,就用storage
storage在存储数据的大小上面秒杀了cookie
localStorage和sessionStorage唯一的差别是一个永久保存在浏览器里面,一个是关闭网页就清除了信息。localStorage可以用来跨页面传递参数,sessionStorage用来保存一些临时的数据,防止用户刷新页面之后丢失了一些参数。
三、浏览器支持情况
localStorage和sessionStorage是h5才应用的新特性,可能有些浏览器并不支持。
参考:来自掘金-参考链接