前端存储机制：localStorage、sessionStorage 与 Cookie 对比

三、最佳实践总结

四、工具函数示例（封装）

// 本地存储工具
const Storage = {
  // localStorage 读写
  setLocal(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },
  getLocal(key, defaultValue = null) {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : defaultValue;
  },
  // sessionStorage 读写
  setSession(key, value) {
    sessionStorage.setItem(key, JSON.stringify(value));
  },
  getSession(key, defaultValue = null) {
    const item = sessionStorage.getItem(key);
    return item ? JSON.parse(item) : defaultValue;
  },
  // Cookie 读写（带安全标志）
  setCookie(name, value, days = 7, path = '/') {
    const expires = new Date();
    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = `${name}=${encodeURIComponent(value)};expires=${expires.toUTCString()};path=${path};Secure;SameSite=Lax`;
  },
  getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return decodeURIComponent(parts.pop().split(';').shift());
    return null;
  }
};

五、总结

• localStorage：长期保存，跨页面共享，适合用户偏好、离线数据。
• sessionStorage：仅当前会话有效，适合临时状态、表单草稿。
• Cookie：随 HTTP 请求自动发送，适合身份验证、会话管理，必须配合安全标志使用。

六、附录（前端数据存储选型决策树）

1. 需要长期保存吗？
   • 是 → 使用 localStorage
   • 否 → 进入下一步
2. 是否需要跨标签页共享？
   • 是 → 使用 localStorage
   • 否 → 进入下一步
3. 是否仅用于当前会话？
   • 是 → 使用 sessionStorage
   • 否 → 进入下一步
4. 数据需要随 HTTP 请求发送给服务器吗？
   • 是 → 使用 Cookie
   • 否 → 优先考虑 localStorage 或 sessionStorage
5. 是否涉及用户身份或敏感信息？
   • 是 → 使用 Cookie + HttpOnly + Secure + SameSite=Lax
   • 否 → 使用 Cookie（但控制大小）