cookie、localStorage 和 sessionStorage的区别
这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
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 |
| 访问 | 任何窗口 | 任何窗口 | 同一窗口 |
| 有效期 | 手动设置 | 无 | 到窗口关闭 |
| 存储位置 | 浏览器和服务器 | 浏览器 | 浏览器 |
| 与请求一起发送 | 是 | 否 | 否 |
| 语法 | 复杂 | 简易 | 简易 |
