cookies，sessionStorage 和 localStorage 的区别

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

• cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
• cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
• sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。
• 存储大小：
  • cookie 数据大小不能超过 4k。
  • sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
• 有效期（生命周期）：
  • localStorage: 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
  • sessionStorage: 数据在当前浏览器窗口关闭后自动删除。
  • cookie: 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
• 共享
  • sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享

cookie，localStorage，sessionStorage，indexDB

特性	cookie	localStorage	sessionStorage	indexDB
数据生命周期	一般由服务器生成，可以设置过期时间	除非被清理，否则一直存在	页面关闭就清理	除非被清理，否则一直存在
数据存储大小	4K	5M	5M	无限
与服务端通信	每次都会携带在 header 中，对于请求性能影响	不参与	不参与	不参与

从上表可以看到，cookie 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储，否则可以用 sessionStorage 存储。

对于 cookie，我们还需要注意安全性。

属性	作用
value	如果用于保存用户登录态，应该将该值加密，不能使用明文的用户标识
http-only	不能通过 JS 访问 Cookie，减少 XSS 攻击
secure	只能在协议为 HTTPS 的请求中携带
same-site	规定浏览器不能在跨域请求中携带 Cookie，减少 CSRF 攻击