JavaScript localStorage存取数据方法

localStorage 的存取操作看似简单，但实际开发中容易踩坑。它只支持字符串类型，存储对象或数字时需手动转换，取出后也要还原，否则可能引发错误。下面将核心用法逐一拆解，帮助您更稳妥地使用本地存储。

如何存储数据

使用 setItem(key, value) 方法，两个参数都必须是字符串，这是最基础的原则：

• 直接存储字符串最简单：localStorage.setItem('theme', 'dark')，直观明了。
• 存储数字或布尔值时，会被自动转换为字符串，原始类型信息丢失：localStorage.setItem('count', 42) 实际保存的是 '42'，取出后是字符串而非数字，使用时需注意类型转换。
• 存储对象必须先通过 JSON.stringify() 序列化：localStorage.setItem('user', JSON.stringify({name: '李四', age: 30}))，否则得到的是 '[object Object]'，并非期望的数据。
• 键名建议使用字母、数字、下划线，避免空格和特殊字符，便于后续维护，同时减少编码问题。

如何读取数据

使用 getItem(key) 方法，返回结果均为字符串，需根据存储方式还原数据类型：

• 读取字符串直接使用：const theme = localStorage.getItem('theme')，无需额外处理。
• 读取数字或布尔值时，需手动转换：const count = Number(localStorage.getItem('count')) 或 const active = localStorage.getItem('active') === 'true'，这一步不能省略。
• 读取对象必须使用 JSON.parse()，并建议加上 try...catch 防止数据损坏或格式异常导致程序崩溃：
  

  try {
    const user = JSON.parse(localStorage.getItem('user'));
  } catch (e) {
    // 数据损坏或为空时，进行兜底处理
  }

如何删除数据

提供两种常用方式，根据场景选择：

• 删除单个键值对：localStorage.removeItem('theme')，精准移除。
• 清空所有数据：localStorage.clear() —— 谨慎使用，此操作会删除当前域名下的全部 localStorage 数据，且无法恢复。

实用注意事项

实际开发中，以下细节容易忽略，需提前留意：

• 不同协议、域名、端口之间数据不共享。例如 http://a.com 与 https://a.com 看似相近，但各自拥有独立的存储空间，互不影响。
• 容量上限约为 5–10MB，数据超出限制时会抛出 QuotaExceededError 异常，建议在代码中加入错误处理。
• 数据不会过期，即使关闭浏览器或重启电脑，已存储的数据仍然保留，适合长期保存用户偏好、表单草稿等内容。
• 敏感信息（如 token、密码）不应存入 localStorage，因其存在 XSS 攻击风险，安全性较低，这一点已形成共识。