17370845950

localStorage数据永久保存、跨会话存在，sessionStorage仅限当前标签页生命周期；二者API相同但生命周期和作用域不同，均受同源策略限制且只支持字符串值，存对象需JSON.stringify/parse。

localStorage 是浏览器提供的持久化键值存储 API，数据不会过期，除非手动清除或用户主动删除。

localStorage 和 sessionStorage 有什么区别？

两者都是 window 对象上的属性，API 完全一致，但生命周期和作用域不同：

• localStorage：数据永久保存（实际是“无自动过期”，可跨会话、重启浏览器后仍存在）
• sessionStorage：仅在当前标签页生命周期内有效，关闭该标签页即清空
• 二者都受同源策略限制（协议 + 域名 + 端口必须完全相同）
• 都不支持存储函数、undefined、Symbol 或循环引用对象

怎么存取 JSON 数据？为什么不能直接存对象？

localStorage 只接受字符串作为值。直接存对象会调用 toString()，结果是 [object Object]，取出来就丢了数据。

正确做法是用 JSON.stringify() 存，JSON.parse() 取：

立即学习“Java免费学习笔记（深入）”；

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

const saved = localStorage.getItem("user");
const parsed = saved ? JSON.parse(saved) : null; // 注意判空，getItem 可能返回 null

常见错误：

• 没处理 getItem 返回 null 就直接 JSON.parse(null) → 报错 Unexpected token 'n' in JSON
• 存了 undefined 或 function 字段 → JSON.stringify 会忽略它们，还原后字段消失
• 对象太大（超过 5–10MB，因浏览器而异）→ 触发 QuotaExceededError

怎么安全地删除或清空数据？

有三种粒度的操作方式：

• 删单个：localStorage.removeItem("key")
• 清空当前域名下所有：localStorage.clear()（慎用，会影响其他功能模块）
• 删带前缀的一批（如 app_*）：需遍历 localStorage.key(i) 手动匹配

注意：clear() 不会触发 storage 事件（当前页面不会收到），但其他同源标签页会收到。

监听变化的写法：

window.addEventListener("storage", (e) => {
  console.log("key:", e.key, "old:", e.oldValue, "new:", e.newValue);
});

真正难的是边界情况：比如用户开了多个标签页，一个改了 user，另一个没刷新就继续操作旧数据；或者存了时间戳但没校验有效期。这些得靠业务逻辑补足，localStorage 本身不提供版本或过期能力。