17370845950

localStorage用于跨会话持久存储，同源共享；sessionStorage仅限当前标签页，关闭即销毁；二者均需手动序列化对象，超容或禁用时会抛异常，且storage事件不触发于当前页修改。

本地存储不是“存完就完事”，关键在什么时候用 localStorage、什么时候该换 sessionStorage，以及为什么某些数据存不进去还不出错。

localStorage 和 sessionStorage 的核心区别在哪

两者 API 完全一致，但生命周期和作用域不同：

• localStorage：数据永不过期，关闭标签页、重启浏览器都还在，同源（协议+域名+端口）下所有页面共享
• sessionStorage：仅当前标签页有效，关掉标签页即清空，即使同域名的其他标签页也读不到
• 二者都只能存字符串，存对象必须先 JSON.stringify()，取出来要 JSON.parse()
• 都不受 HTTP 缓存或 Cookie 设置影响，也不发请求，纯前端行为

存对象时忘记序列化会静默失败

调用 localStorage.setItem('user', {name: 'Alice'}) 看似没报错，但实际存入的是 "[object Object]"——因为 setItem 会自动调用 .toString()。取出来再 JSON.parse()

正确写法必须显式处理：

const user = { name: 'Alice', age: 28 };
localStorage.setItem('user', JSON.stringify(user));

const saved = localStorage.getItem('user');
const parsed = saved ? JSON.parse(saved) : null;

建议封装一层安全读写函数，避免每次手动判断 null 或解析异常。

超出容量或特殊字符导致写入失败

大多数浏览器限制 localStorage 总容量在 5–10 MB 左右，但它是按 origin 计算的，不是单个 key。一旦超限，setItem 会抛出 QuotaExceededError 异常，而不是返回 false。

• 中文、emoji、控制字符本身不导致失败，但经过 JSON.stringify() 后可能增大体积
• 某些浏览器（如 Safari 无痕模式）会直接禁用 localStorage，调用即抛错，需 try/catch
• 敏感数据（如 token）别直接存——它不加密、不防 XSS，JS 可任意读取

稳妥做法是加兜底逻辑：

function safeSet(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
  } catch (e) {
    if (e.name === 'QuotaExceededError') {
      console.warn('localStorage quota exceeded');
    } else if (e.name === 'SecurityError') {
      console.warn('localStorage is disabled or blocked');
    }
  }
}

监听 storage 变化只在其他标签页生效

storage 事件只在**同一 origin 下的其他窗口/标签页**触发，当前页面修改后不会收到自己的事件。这是常被误解的一点。

• 适合做多标签页状态同步（比如用户登出后通知其他页刷新）
• 监听写法：window.addEventListener('storage', e => {...})
• e.key 是被改的键名，e.newValue 和 e.oldValue 是字符串值（注意：删除时 newValue 为 null）
• 无法得知是谁触发的变更，也无法阻止变更

如果需要当前页响应自身修改，得自己发自定义事件或用状态管理工具同步。

真正麻烦的不是怎么写那几行 setItem，而是想清楚数据要不要跨会话保留、有没有被脚本恶意读取的风险、以及用户换了设备或清了缓存之后，你的“本地”到底还剩多少。