Cookie
优点
-
自动发送：Cookies 会在每个请求中自动发送到服务器（如果设置了
HttpOnly和Secure标志），这对于需要跨域请求的场景非常有用。 -
持久化：可以设置过期时间，使其在浏览器会话之间持久存在。
-
安全性：可以设置
HttpOnly标志，防止 JavaScript 访问，减少 XSS 攻击风险。
缺点
-
大小限制：每个 Cookie 的大小限制为 4KB。
-
自动发送：每次请求都会携带 Cookie，可能带来性能开销。
-
复杂性：需要配置 SameSite 属性来防范 CSRF 攻击。
示例
// 设置 Cookie
document.cookie = "token=yourToken; path=/; secure; HttpOnly";
// 获取 Cookie
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
// 删除 Cookie
document.cookie = "token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
Local Storage
优点
- 大小：每个域名的存储大小限制为 5-10MB（浏览器不同，限制不同）。
- 持久化：数据在浏览器关闭后仍然存在，除非手动删除。
- 简单易用：API 简单，容易操作。
Local Storage 可以在同一个网站的多个标签页之间共享数据。当你在一个标签页中设置或修改 Local Storage 中的数据时，其他标签页也可以立即访问到这些变化的数据。唯一的限制是需要在同一域名下。
缺点
-
安全性：容易受到 XSS 攻击，无法设置
HttpOnly。 -
同步问题：多个标签页之间的 Local Storage 不能自动同步。
示例
// 设置 Local Storage
localStorage.setItem('token', 'yourToken');
// 获取 Local Storage
const token = localStorage.getItem('token');
// 删除 Local Storage
localStorage.removeItem('token');
Session Storage
优点
-
大小：每个域名的存储大小限制为 5-10MB（浏览器不同，限制不同）。
-
会话存储：数据只在当前浏览器会话中存在，关闭浏览器标签页时会自动删除。
-
简单易用：API 简单，容易操作。
缺点
-
安全性：容易受到 XSS 攻击，无法设置
HttpOnly。 -
会话限制：只在当前会话中有效，关闭标签页或浏览器后数据会丢失。
示例
// 设置 Session Storage
sessionStorage.setItem('token', 'yourToken');
// 获取 Session Storage
const token = sessionStorage.getItem('token');
// 删除 Session Storage
sessionStorage.removeItem('token');
比较和选择
1. Cookie
-
适用场景：需要跨域请求、需要自动发送 Token 的场景。
-
注意事项：设置
HttpOnly和Secure属性，防范 XSS 和 CSRF 攻击。
2. Local Storage
-
适用场景：需要长期存储数据、数据在浏览器关闭后仍然需要存在的场景。
-
注意事项：防范 XSS 攻击，不适用于敏感数据的存储。
3. Session Storage
-
适用场景：仅在当前会话中需要存储数据的场景，数据在浏览器标签页关闭后不再需要。
-
注意事项：防范 XSS 攻击，不适用于敏感数据的存储。
综合考虑
- 安全性优先：如果安全性是首要考虑，使用 Cookie 并设置
HttpOnly和Secure属性。 - 长期存储：如果需要长期存储数据，使用 Local Storage，但注意防范 XSS 攻击。
- 会话存储：如果只需要存储会话数据，使用 Session Storage。
