Cookie、localStorage和sessionStorage的区别？🔥

这是我参与更文挑战的第5天，活动详情查看： 更文挑战

---

Cookie 介绍

因为 HTTP 是无状态的协议，不能保存每一次请求的状态，因此须要给客户端增长 Cookie 来保存客 户端的状态。 Cookie 的做用主要用于 用户识别 和 状态管理 。（好比网页常见的记住密码）

安全性

在 Cookie 传输和管理的时候，要确保 Cookie 的安全性，不被窃取。

• Secure ：仅在 HTTPS 安全通讯时才会发送 Cookie 。
• HttpOnly ：使用 Cookie 不能被 Javascript 脚本访问（防止跨站脚本攻击 XSS 对 Cookie 信 息的窃取）。
• SameSite ：防止跨站伪造 CORF 的攻击
  • Strict ：浏览器彻底禁止第三方请求携带 Cookie。
  • Lax ：只能在 get 方法提交表单 状况或者 a 标签发送 get 请求 的状况下能够携带 Cookie。
  • None ：默认，请求会自动携带上 Cookie。

webStorage基于HTML5规范

HTML5 提供了两种在客户端存储数据的新方法：localStorage和sessionStorage，挂载在window对象下。

webStorage是本地存储，数据不是由服务器请求传递的。从而它能够存储大量的数据，而不影响网站的性能。

Web Storage的目的是为了克服由cookie带来的一些限制，当数据须要被严格控制在客户端上时，无须持续地将数据发回服务器。好比客户端须要保存的一些用户行为或数据，或从接口获取的一些短时间内不会更新的数据，咱们就能够利用Web Storage来存储。

localStorage:

生命周期是永久性的。localStorage存储的数据，即便关闭浏览器，也不会让数据消失，除非主动的去删除数据。若是 想设置失效时间，需自行封装。

sessionStorage

生命周期是在浏览器相关

• 关闭浏览器或者页面，sessionStorage 就会失效；
• 页面刷新不会消除数据；
• 只有在当前页面打开的连接，才能够访sessionStorage的数据，使用window.open打开页面和改变localtion.href方式均可以获 取到sessionStorage内部的数据;

总结：

特性	Cookie	localStorage	sessionStorage
数据的生命期	通常由服务器生成，可设置失效时间。若是在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，不然永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4KB左右	通常为5MB	同localstroage
与服务器端通讯	每次都会携带在HTTP头中，发送给服务端。可是使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不和服务器的通讯	同localstroage