cookie,sessionStorage,LocalStorage的区别

首先，需要了解，三者都是常见的浏览器缓存策略，当然除了这三者以外还有IndexDB方式，在这里就不细讲。

概念

cookie,sessionStorage,LocalStorage三者都是浏览器缓存中最常用的缓存方式，各自有适用的场景和限制约束：
三者都只能存储字符串类型，当存储其他类型时，必须先转化为字符串类型才能进行存储（若要存储数组，对象类型需要先使用JSON.stringify（）将其转换为json字符串，当需要从存储中获取这些数据时，使用JSON.prase()将其转换回数组或对象）

Cookie

Cookie主要是用来在服务端读取的，它可以用来追踪用户或维护用户的状态等。每次HTTP请求时，Cookie都会被发送到服务器。

LocalStorage

LocalStorage则只能在客户端（你的JavaScript）读取，它用来在用户的浏览器中存储大量的数据，而不影响网站的性能。LocalStorage的数据会持久保存，只有通过JavaScript或清除浏览器缓存才能清除。

sessionStorage

SessionStorage和LocalStorage非常相似，它们都是在客户端存储数据，且存储空间都比Cookie大。但是，SessionStorage的数据在浏览器会话结束时会被清除，也就是说，当用户关闭浏览器标签或窗口时，SessionStorage中的数据就会被删除。

存储生命周期

sessionstorage仅在当前浏览器窗口关闭之前有效(浏览器关闭则失效)

localstorage可以实现持久化存储，即保存的内容始终有效，浏览器窗口关闭也始终存在，所以叫持久化存储

数据共享性

共享性：LocalStorage不可以在不同网页之间共享LocalStorage中的内容，而cookie可以在不同同一浏览器的不同网页之间共享

localStorage.setItem()
localStorage.getItem()
localStorage.removeItem()
localStorage.clear()

sessionStorage.setItem()
sessionStorage.getItem()
sessionStorage.clear()
sessionStorage.removeItem()

适用场景

1.Cookie：适合小数据+需要服务端通信的场景

典型用途：
用户身份认证：服务端生成session，通过Set-Cookie设置cookie并发送给浏览器；浏览器后续请求自动带上，并保持登录状态
跟踪用户行为：记录用户来源，访问路径等信息
保存小型用户偏好（如语言、主题：如language=zh-CN,服务器可以根据此返回对应语言的内容
⚠️ 注意事项：
尽量不要存敏感信息（易被 XSS/CSRF 攻击）。
使用 HttpOnly 防止 JS 访问（防 XSS）。
使用 Secure 和 SameSite 提高安全性。

2. sessionStorage：适合临时数据 + 单次会话内使用的场景

典型用途：
表单数据临时保存
用户填写长表单时，刷新页面不丢失已填内容（仅限当前标签页）。
页面间临时传参
从 A 页面跳转到 B 页面，传递一些中间数据（比 URL 参数更安全、不限长度）。
防止重复提交
提交后标记状态，避免用户刷新重复操作。
单页应用中的临时状态缓存
如购物车预览、未确认的选择项等。
⚠️ 特点：
数据只在同一个标签页中有效。
关闭标签页或窗口后自动清除。
不同标签页即使访问同一网站，sessionStorage 也是隔离的。

3. localStorage：适合持久化数据 + 长期本地存储的场景

典型用途：
用户偏好设置
如主题模式（深色/浅色）、字体大小、布局配置等，关闭浏览器后仍保留。
离线数据缓存
缓存 API 数据、文章内容等，提升加载速度或支持离线访问。
记住用户名
登录页“记住我”功能（注意：不能存密码明文！可用 token 加密存储）。
埋点数据暂存
网络不佳时先存本地，稍后批量上报。
⚠️ 注意事项：
数据永久存在，需提供清除机制（如设置里的“清除缓存”）。
敏感信息建议加密存储。
所有同源页面共享，注意命名冲突。