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 本身不提供版本或过期能力。











