HTML5本地存储localStorage怎么用_存数据取数据方法【解答】

林译川

2026-09-17 • 👁 0人浏览过

localStorage存取数据最安全做法是：存对象用JSON.stringify()、取值先判空再JSON.parse()；键名用字母数字组合；超限时捕获QuotaExceededError并降级；避免clear()误删，批量删除需遍历判断前缀。 localStorage.setItem() 存字符串最安全 localStorage 只能存字符串，直接传对象或数字会自动调用

toString()

，导致数据失真。比如存

{name: "张三", age: 25}

，不处理就存进去，取出来是

[object Object]

。实操建议：存对象前必须用

JSON.stringify()

序列化存布尔值、数字时也建议统一转字符串或显式序列化，避免隐式转换歧义（如

false

变成

""

）键名尽量用字母数字组合，避免空格、斜杠、控制字符，否则某些浏览器可能静默失败

localStorage.setItem('user', JSON.stringify({name: "张三", age: 25}));
localStorage.setItem('count', String(100)); // 显式转字符串更可控

localStorage.getItem() 取值后记得 JSON.parse() 取出来的永远是字符串，哪怕你当初存的是数字或布尔值。不解析就直接用，很容易在条件判断或计算中出错——比如

if (localStorage.getItem('isLogin') === true)

永远为

false

，因为取出来是

"true"

字符串。常见错误现象：立即学习 “ 前端免费学习笔记（深入） ”； Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载

JSON.parse(null)

报错：

getItem()

找不到键时返回

null

，不能直接丢给

JSON.parse()

存了非法 JSON（比如手动拼接字符串），

JSON.parse()

会抛

SyntaxError

const userStr = localStorage.getItem('user');
const user = userStr ? JSON.parse(userStr) : null; // 先判空再解析
const count = Number(localStorage.getItem('count')) || 0;

localStorage.removeItem() 和 clear() 的适用场景不同

removeItem(key)

删除单个键值对，

clear()

清空全部。别在用户仅想“退出当前账号”时误用

clear()

，可能把其他功能的配置（比如主题色、语言偏好）也删了。使用注意点：

removeItem()

对不存在的键静默失败，不报错也不提示

clear()

不可逆，且会影响同源下所有页面共享的 localStorage，谨慎用于生产环境如果要批量删，自己遍历

Object.keys(localStorage)

判断前缀再删，比全清更稳妥

// 安全地删一组以 'cart_' 开头的数据
Object.keys(localStorage).forEach(key => {
  if (key.startsWith('cart_')) {
    localStorage.removeItem(key);
  }
});

localStorage 的容量和错误边界必须主动检查多数浏览器限制在 5MB 左右（不是精确值，Chrome 是约 5.2MB，Safari 移动端可能只有 2.5MB），超限会触发

QuotaExceededError

。但这个错误不会自动抛出——只有在

setItem()

失败时才发生，且部分旧版 Safari 还会静默截断。关键应对方式：写入前先估算字符串长度：

new TextEncoder().encode(str).length

（UTF-8 字节长度）比

str.length

更准捕获异常并降级：比如改用 session Storage 或提示用户清理不要假设“存得进就一定取得出”，特别在 iOS Safari 中，存储后立即读取有时返回

null

（需加短延时或重试）

try {
  localStorage.setItem('data', hugeString);
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    console.warn('localStorage 空间不足');
    // 触发清理逻辑或切换存储方案
  }
}

实际项目里最容易被忽略的，是跨页面写入后立即读取的时机问题，以及未处理

null

就直接

JSON.parse()

的崩溃风险。

相关文章