localStorage是浏览器提供的客户端持久化键值对存储，数据默认永久保存、不随请求发送、容量约5–10MB；与cookie相比，它不自动发往服务器、无过期机制、JS可直接读写，适合存非敏感前端状态。
localStorage 是什么，和 cookie 有什么区别
localStorage 是浏览器提供的一种持久化键值对存储机制，数据默认永久保存（除非手动清除或用户清缓存），不随 HTTP 请求自动发送，也不受同源策略中 cookie 的过期时间、大小限制（5MB 左右）影响。它比 cookie 更适合存前端状态、用户偏好、离线缓存等非敏感数据。
关键区别：
– cookie 会随每个请求发给服务器，有 HttpOnly 和 Secure 等安全控制；localStorage 完全在客户端，JS 可读写；
– cookie 最大通常 4KB，localStorage 一般 5–10MB（因浏览器而异）；
– cookie 支持服务端设置过期时间，localStorage 没有过期机制，只能靠代码手动删。
如何用 setItem / getItem / removeItem 操作 localStorage
所有操作都通过 window.localStorage 对象进行，方法名直白，但要注意：值必须是字符串，对象要先 JSON.stringify()，读取后要 JSON.parse()。
-
localStorage.setItem(key, value)：存字符串，比如localStorage.setItem('theme', 'dark') -
localStorage.getItem(key)：取值，不存在时返回null，不是undefined -
localStorage.removeItem(key)：删单个键 -
localStorage.clear()：清空全部（谨慎调用）
localStorage.setItem('user', JSON.stringify({ id: 123, name: 'Alice' }));
const user = JSON.parse(localStorage.getItem('user') || '{}');
if (!user.id) {
console.log('用户数据丢失或未初始化');
}
为什么 getItem 返回 null 而不是 undefined，以及常见报错场景
getItem 明确规范返回 null（不是 undefined），这点常被忽略，直接解构或访问属性会报 Cannot read property 'xxx' of null。
立即学习“Java免费学习笔记（深入）”；
容易踩的坑：
- 没做空值判断就调
JSON.parse(localStorage.getItem('x'))→JSON.parse(null)报错 - 存了
undefined或function→ 序列化后变成"null"或"undefined"，再解析就失真 -
跨域 iframe 或私密模式下，
localStorage可能被禁用，访问会抛SecurityError - 某些安卓 WebView 或老版 Safari 在页面刚加载时首次访问
localStorage可能短暂不可用
稳妥写法：
function safeGet(key) {
try {
const raw = localStorage.getItem(key);
return raw ? JSON.parse(raw) : null;
} catch (e) {
console.warn(`Failed to parse localStorage item "${key}"`, e);
return null;
}
}
localStorage 的事件监听与多标签同步问题
同一个域名下的多个标签页共享同一份 localStorage，但修改不会自动触发当前页的响应——需要监听 storage 事件才能感知其他标签页的变化。
注意点：
- 该事件**只在其他标签页触发变更时才触发**，本页调
setItem不会触发自己的storage事件 - 事件对象的
key、oldValue、newValue、url字段可用，但newValue为null表示该 key 被removeItem或clear - 不支持监听某个 key 的变化，只能全局监听 + 手动过滤
window.addEventListener('storage', (e) => {
if (e.key === 'theme') {
document.documentElement.setAttribute('data-theme', e.newValue || 'light');
}
});
真正难处理的是竞态：比如两个标签同时改同一 key，谁最后写谁生效，没有锁机制。业务上需要同步状态时，得额外加版本号或时间戳校验，不能只依赖 localStorage 原语。
