前端本地存储详解：localStorage、sessionStorage 与 Cookie 对比

在浏览器环境中，本地存储（localStorage）、会话存储（sessionStorage）和 Cookie 都是客户端保存数据的重要手段，但它们在生命周期、作用域、容量及安全性上存在显著差异。

核心区别对比

特性	localStorage	sessionStorage	Cookie
生命周期	永久，除非手动清除	仅当前会话（关闭标签页即清）	可设过期时间
作用域	同源（协议 + 域名 + 端口）	同源	可指定路径、域名
存储大小	约 5–10 MB	约 5–10 MB	约 4 KB
HTTP 传输	否	否	是（自动携带）
JS 访问	是	是	是（非 HttpOnly）
安全性	低（易受 XSS）	低（同上）	中高（配合标志位）
跨标签页	是	否	是（同域名路径）

场景与最佳实践

localStorage：长期持久化

适合用户偏好（主题、语言）、登录态记忆（'记住我'）、离线草稿等。 注意： 不适合存密码等敏感信息，大量数据可能影响性能。建议定期清理，命名加前缀避免冲突。

sessionStorage：临时会话

适合表单填写中途保存、临时状态流转。 注意： 关闭标签页即丢失，不跨标签页。提交前最好同步到后端，别过度依赖前端存储。

Cookie：通信与鉴权

适合身份验证（SessionID）、行为追踪、防 CSRF。 最佳实践： 优先 HttpOnly + Secure + SameSite=Lax。控制大小，避免敏感明文。

工具函数封装示例

下面是一个简单的存储工具类，封装了读写逻辑。注意，Cookie 的 HttpOnly 属性无法通过 JavaScript 设置，必须依赖服务器响应头。

// 本地存储工具封装
  = {
  
  () {
    .(key, .(value));
  },
  () {
     item = .(key);
     item ? .(item) : defaultValue;
  },

  
  () {
    .(key, .(value));
  },
  () {
     item = .(key);
     item ? .(item) : defaultValue;
  },

  
  () {
     expires =  ();
    expires.(expires.() + days *  *  *  * );
    
    . = ;
  },
  () {
     value = ;
     parts = value.();
     (parts. === )  (parts.().().());
     ;
  }
};