这三种都是浏览器端存储数据的机制，但它们在生命周期、作用域、容量等方面有显著差异：
存储容量
- localStorage: 通常5MB（具体取决于浏览器）
- sessionStorage: 通常5MB（具体取决于浏览器）
- cookie: 通常4KB
生命周期
- localStorage: 永久存储，除非手动清除（通过JS或浏览器设置）
- sessionStorage: 仅在当前会话有效，关闭标签页或浏览器后清除
- cookie: 可设置过期时间，未设置则默认为会话cookie（关闭浏览器后清除）
数据类型
- localStorage 和 sessionStorage: 只能存储字符串类型的数据。如果需要存储复杂数据类型（如对象或数组），需要先将其转换为 JSON 字符串。
- cookie: 也只能存储字符串类型的数据。
安全性
-
localStorage 和 sessionStorage:
- 数据存储在客户端，不会自动发送到服务器。
- 存在 XSS（跨站脚本攻击）风险，因为恶意脚本可以访问存储的数据。
- 适合存储非敏感数据。
-
cookie:
- 数据会自动随 HTTP 请求发送到服务器（除非设置了
HttpOnly属性）。 - 可以通过
Secure属性确保 cookie 只通过 HTTPS 传输。 - 可以通过
HttpOnly属性防止客户端脚本访问 cookie（降低 XSS 风险）。 - 适合存储会话标识符等敏感数据。
- 数据会自动随 HTTP 请求发送到服务器（除非设置了
API接口
localStorage/sessionStorage:
localStorage.setItem('key', 'value');
localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();
// sessionStorage API相同
cookie:
// 原生JS操作较复杂
document.cookie = "name=value; expires=date; path=/";
// 通常需要封装或使用库
