JavaScript 的本地存储 localStorage 如何存取数据

localStorage只存储字符串，存对象需JSON.stringify()、取时需JSON.parse()并加try...catch；数字布尔值会丢失类型，需手动转换；键名建议用字母数字下划线；不同源数据不共享，容量5–10MB，敏感信息勿存。

localStorage 存取数据很简单，但关键在细节：它只认字符串，存对象或数字必须手动转换，取出来也得还原，否则会出错。

怎么存数据

用 setItem(key, value) 方法，两个参数都必须是字符串：

• 直接存字符串没问题：localStorage.setItem('theme', 'dark')
• 存数字或布尔值会自动转成字符串，可能丢失类型：localStorage.setItem('count', 42) 实际存的是 '42'，取出来是字符串不是数字
• 存对象必须先用 JSON.stringify()：localStorage.setItem('user', JSON.stringify({name: '李四', age: 30}))
• 键名建议用字母、数字、下划线，避免空格和特殊字符，方便维护

怎么取数据

用 getItem(key)，返回的是字符串，要还原成原始类型：

• 取字符串直接用：const theme = localStorage.getItem('theme')
• 取数字或布尔值，需手动转换：const count = Number(localStorage.getItem('count')) 或 const active = localStorage.getItem('active') === 'true'
• 取对象必须用 JSON.parse()，且强烈建议加 try...catch 防止解析失败：
  

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

怎么删数据

有两种常用方式：

立即学习“Java免费学习笔记（深入）”；

• 删单个：localStorage.removeItem('theme')
• 清空全部：localStorage.clear() —— 慎用，会删除当前域名下所有 localStorage 数据

几个实用提醒

实际开发中容易踩坑的地方：

• 不同协议、域名、端口之间数据不共享（比如 http://a.com 和 https://a.com 是不同源）
• 容量约 5–10MB，超限时会抛 QuotaExceededError 异常
• 数据不会过期，关浏览器、重启电脑都不丢，适合存用户偏好、表单草稿等长期需要的数据
• 敏感信息（如 token、密码）不该存在 localStorage，它不安全，容易被 XSS 攻击窃取