JavaScript localStorage存取数据方法

作者：技术拾光时间：2026-07-25 08:28:20浏览：667

localStorage只接受字符串类型，存对象需用JSON.stringify序列化，取对象需JSON.parse并加try...catch防崩溃。数字和布尔值需手动转换类型。删除用removeItem或clear，容量约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}))，否则得到的是 '[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) {
  // 数据损坏或为空时，进行兜底处理
}

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

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