什么是Web Storage_如何在javascript中使用localStorage_技术教程

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。

容易踩的坑：

没做空值判断就调 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 原语。