Cookie、 Local Storage、 Session Storage三种客户端存储方式
存储特性对比表
| 特性 | Cookie | Local Storage | Session Storage |
|---|---|---|---|
| 生命周期 | 可设置过期时间 | 永久保存 | 会话结束自动清除 |
| 存储容量 | 4KB左右 | 5-10MB | 5-10MB |
| 自动发送到服务器 | 每次HTTP请求头携带 | 不发送 | 不发送 |
| 访问方式 | 服务端/客户端均可读写 | 仅客户端 | 仅客户端 |
使用场景及示例
1. Cookie - 用户身份验证
// ASP.NET Core 中设置登录Cookie
public IActionResult Login()
{var cookieOptions = new CookieOptions {Expires = DateTime.Now.AddDays(7),HttpOnly = true, // 防止XSS攻击Secure = true // 仅HTTPS传输};Response.Cookies.Append("AuthToken", "加密的令牌", cookieOptions);return RedirectToAction("Dashboard");
}
适用场景：保持登录状态、跟踪用户会话
2. Local Storage - 用户偏好设置
// 在Razor视图中嵌入JavaScript初始化设置
<script>
// 保存主题偏好
function saveTheme(theme) {localStorage.setItem('userTheme', theme);applyTheme(theme);
}// 初始化时读取
const savedTheme = localStorage.getItem('userTheme') || 'light';
applyTheme(savedTheme);
</script>
适用场景：保存长期用户设置（主题、语言）、缓存静态资源
3. Session Storage - 表单暂存
// MVC控制器返回包含恢复表单的视图
public IActionResult Checkout()
{ViewBag.SessionId = HttpContext.Session.Id;return View();
}// 视图中的恢复逻辑
<script>
// 页面加载时恢复草稿
window.addEventListener('load', () => {const formData = sessionStorage.getItem('checkoutForm');if(formData) {document.getElementById('address').value = JSON.parse(formData).address;}
});// 实时保存表单内容
document.querySelector('form').addEventListener('input', (e) => {const formData = {address: document.getElementById('address').value,payment: document.getElementById('payment').value};sessionStorage.setItem('checkoutForm', JSON.stringify(formData));
});
</script>
适用场景：多步骤表单暂存、单页面应用状态保持
安全建议
- 敏感数据应存储加密后的值，例如：
e n c r y p t e d D a t a = A E S E n c r y p t ( k e y , " 原始数据 " ) encryptedData = AES_{Encrypt}(key, "原始数据") encryptedData=AESEncrypt(key,"原始数据") - Cookie建议设置：
new CookieOptions {SameSite = SameSiteMode.Strict,Domain = ".yourdomain.com",Path = "/",// 其他安全设置... } - Web Storage使用时需防范XSS攻击：
// 对存储内容进行转义 const safeContent = DOMPurify.sanitize(userInput); localStorage.setItem('comment', safeContent);
根据数据敏感性选择存储方式：身份验证建议用HttpOnly Cookie，非敏感设置可用Local Storage，临时工作数据适合Session Storage。