javascript本地存储有哪些方式_如何使用localStorage？

localStorage 持久存储且跨会话，sessionStorage 仅限当前标签页会话；二者均同源、仅支持字符串、有容量限制、同步阻塞，存对象需 JSON 序列化，不安全存敏感信息，推荐封装容错读写并优先评估数据必要性。

localStorage 和 sessionStorage 有什么区别？

两者都属于 Web Storage API，但生命周期和作用域不同：localStorage 持久保存，关闭浏览器也不丢失；sessionStorage 仅在当前标签页会话期间有效，关闭标签即清空。

它们都只能存字符串，存对象必须先 JSON.stringify()，读取时再 JSON.parse()。不支持直接存函数、undefined、Symbol 或 Date 对象（会转成空字符串或 "Invalid Date"）。

• 同源限制：协议 + 域名 + 端口完全一致才可访问
• 容量限制：通常为 5–10MB，但各浏览器不一，超出会抛 QuotaExceededError
• 同步阻塞：读写都在主线程，大量数据可能卡 UI

如何安全地使用 localStorage.setItem() 和 getItem()？

直接调用 localStorage.setItem(key, value) 很容易出错——比如 value 是对象却没序列化，或 key 为空字符串，或浏览器禁用本地存储（如无痕模式下 Safari 默认禁用）。

推荐封装一层容错逻辑：

function safeSetItem(key, value) {
  try {
    if (typeof window === 'undefined') return;
    const str = JSON.stringify(value);
    localStorage.setItem(key, str);
  } catch (e) {
    if (e.name === 'SecurityError' || e.name === 'QuotaExceededError') {
      console.warn(`localStorage write failed for key "${key}":`, e.message);
    }
  }
}

function safeGetItem(key, defaultValue = null) {
  try {
    const str = localStorage.getItem(key);
    return str ? JSON.parse(str) : defaultValue;
  } catch (e) {
    console.warn(`localStorage parse failed for key "${key}":`, e.message);
    return defaultValue;
  }
}

注意：localStorage.getItem() 返回 null 而非 undefined，判断存在性别用 == null 或 === null，避免误判 false、0、"" 等假值。

localStorage 有哪些典型误用场景？

很多人把它当“前端数据库”用，结果踩坑不断：

• 存敏感信息（如 token、用户密码）——localStorage 可被 XSS 直接读取，绝不该存认证凭据
• 高频写入（如每秒更新计数器）——触发磁盘 I/O，影响性能，应合并或节流
• 未监听 storage 事件就期望跨标签同步——它只在**其他标签页**修改时触发，本页修改不会触发自身事件
• 依赖 localStorage.length 判断是否为空——某些浏览器（如旧版 iOS Safari）返回不准确，建议用 Object.keys(localStor

  

  age).length

有没有比 localStorage 更现代的替代方案？

有，但要看场景：

• 需要事务、索引、大量结构化数据 → 用 IndexedDB（复杂但强大）
• 临时缓存、轻量状态 → sessionStorage 更安全（关闭即销毁）
• 服务端已登录，只需前端维持 UI 状态 → useState + useEffect（React）或 ref 持久化更可控
• 需加密存储 → 不要自己实现 AES，改用 Web Crypto API 的 subtle.encrypt()，且密钥不能硬编码

真正关键的不是“用哪个”，而是想清楚：这个数据是否真的需要跨页面保留？是否会被恶意脚本读取？有没有更小的作用域能覆盖需求？这些问题比选 API 更重要。