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、"" 等假值。

localStora
ge 有哪些典型误用场景？

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

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