八个方面对比解析Cookie、sessionStorage、localStorage 的区别❓
定义与本质
Cookie:浏览器与服务器之间自动传输的小型文本数据，它由服务器通过 HTTP 响应头（Set-Cookie）发送给浏览器，之后浏览器会在每次请求同一网站时自动通过 HTTP 请求头（Cookie）将其回传给服务器，从而实现有状态的会话管理
localStorage：是浏览器提供的一种 客户端存储机制（即浏览器本地存储），允许网页在用户的本地浏览器中存储 持久化键值对数据，不会自动传给服务器。
sessionStorage：是浏览器提供的另一种 客户端存储机制（即浏览器本地存储），一般用于在 当前浏览器标签页会话期间 临时存储键值对数据，仅在当前标签页会话中有效，关闭即清空。
存储容量
Cookie：通常不超过4kb。
localStorage:通常大小限制为5MB,不同浏览器存在差异。
sessionStorage:通常大小限制为5MB,不同浏览器存在差异。
生命周期
Cookie：会话期 Cookie的生命周期与浏览器会话关联，一般浏览器关闭就自动删除。持久性Cookie的生命周期与Expires 或 Max-Age 属性设置的过期时间相联系，在过期时间之前持久保存在本地，浏览器关闭也会保存。当到达过期时间浏览器自动删除。
localStorage：永久性的，除非主动删除或用户清理缓存。
sessionStorage:其生命周期与浏览器标签页严格绑定，关闭标签页或窗口即清除，刷新页面仍保留。
作用域
Cookie:由 Domain 和 Path 两个属性控制，同时受 SameSite 和 Secure 等安全属性的影响。
Domain:指定哪些域名可以访问该 Cookie,如果不设置则 Cookie 仅对 当前域名 有效。
Path：指定哪些路径可以访问该 Cookie，如果不设置默认为 当前路径及其子路径
SameSite：控制 Cookie 是否允许在跨站请求中发送。
Secure：限制 Cookie 仅通过 HTTPS 传输。
localStorage:其访问权限严格遵循浏览器的 同源策略，仅限完全相同的域名。
sessionStorage：其作用域比 localStorage 更严格，除了 同源策略 外，还受 标签页隔离 限制。数据仅对 当前标签页 有效，即使同源的其他标签页也无法访问。
| 特性 | sessionStorage | localStorage | Cookie |
|---|---|---|---|
| 跨标签页共享 | ❌ 仅当前标签页 | ✅ 同源所有标签页 | ✅ 同源所有标签页 |
| 跨子域名共享 | ❌ 严格同源 | ❌ 严格同源 | ✅ 可设 Domain=.example.com |
| 协议隔离 | ✅ HTTP/HTTPS 不互通 | ✅ HTTP/HTTPS 不互通 | ❌ 默认共享（除非 Secure） |
| 路径限制 | ❌ 全路径共享 | ❌ 全路径共享 | ✅ 可设 Path=/admin |
是否参与请求
cookie:自动携带，浏览器会在每次符合作用域的 HTTP 请求头中自动附加 Cookie。
localstorage: 纯前端存储：数据仅通过 JavaScript API 读写，不参与任何网络通信。
sessionStorage:与localstorage一样。
安全性
| 安全维度 | Cookie | localStorage | sessionStorage |
| XSS 攻击风险 | 高风险 | 中高风险 | 中高风险 |
| CSRF 攻击风险 | 高风险 | 无风险 | 无风险 |
| 数据持久性风险 | 中风险 | 高风险 | 低风险 |
| 网络传输风险 | 高风险 | 无风险 | 无风险 |
| 隐私模式泄漏 | 中风险 | 中风险 | 低风险 |
使用场景
Cookie:一般在需要维持登录状态的场景建议使用Cookie。
localStorage：通常在需要长期持久化记住用户信息时，（如用户偏好设置主题、字体大小）。
sessionStorage： 适合临时会话数据，一般用于单页应用，就比如掘金经常叫我们填写飞书表单链接一样，当我们退出之后没提交的表单被删除了。
易用性
local和sessionStorage相较于cookie 更易用。
Cookie 的操作复杂：读取需要解析字符串，需拼接字符串，且属性（Expires、Path 等）需手动设置。local和sessionStorage提供直接的键值对。且存储容量更大，不自动参与http请求那么其就无性能的消耗等。
总结
简单来说就是Cookie 给服务器用，localStorage 给持久前端用，sessionStorage 给临时前端用。