cookie、localStorage 和 sessionStorage的区别

web存储

随着科技的进步，网页的功能越来越丰富，有很多个人设置服务器并不需要获取，比如你上某个网站每次都要设置关灯”模式“，这些个人设置完全可以只保存在客户端里，随着HTML5的出现就有了web存储，其中两个重要的对象就是localStorage和sessionStorage了

当用户第一次请求服务器的时候，服务器响应内容，并且附加可操控网页的JS，当用户操作JS进行个人设置的时候，这些个人设置就可以通过Web存储机制保存在浏览器里了

• 如果用localStorage就可以永远保存在浏览器里，当然也可以自行删除。localStorage虽然被保存下来，但是他本身不参与服务器的通信，这样看Web存储的容量比cookie大非常多， 但是因为localStorage是同步机制，会影响浏览器的渲染进度
• 如果用sessionStorage也可以保存在浏览器里，只不过关闭窗口就会被删除

存储的时间有效期不同

• cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效

• sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效

• localStorage的有效期是在不进行手动删除的情况下是一直有效的

存储的大小不同

• cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息

• localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)

与服务端的通信

• cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。

• localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信

读写操作的便捷程度

• cookie的相关操作，cookie操作起来较为繁琐，并且部分数据不可以读取操作

总结

	cookie	localStorage	sessionStorage
大小	4kb	10Mb	5Mb
兼容	H4/H5	H5	H5
访问	任何窗口	任何窗口	同一窗口
有效期	手动设置	无	到窗口关闭
存储位置	浏览器和服务器	浏览器	浏览器
与请求一起发送	是	否	否
语法	复杂	简易	简易