HTML5如何借助localStorage存取值获取数据_HTML5localStorage存取法【入门】

蓮花仙者 2026-01-15 00:00:00 次阅读

localStorage只能存字符串，非字符串需用JSON.stringify()序列化、JSON.parse()解析，且取值后须判空并try-catch，作用域为同协议域名端口，不自动跨标签页同步。

localStorage 只能存字符串，所有非字符串类型必须手动序列化和解析，这是绝大多数初学者踩坑的根源。

localStorage.setItem() 必须传两个字符串参数

第一个是键名（key），第二个是值（value），且 value 会被自动转成字符串——这意味着直接存对象或数组会变成 "[object Object]" 或 "1,2,3"，数据已丢失。

✅ 正确做法：用 JSON.stringify() 手动序列化
❌ 错误写法：localStorage.setItem('user', {name: 'Alice'})
✅ 正确写法：localStorage.setItem('user', JSON.stringify({name: 'Alice'}))

localStorage.getItem() 返回的是字符串，不是原始类型

即使你存的是数字 42，取出来也是字符串 "42"；存的是对象，取出来是 JSON 字符串，不解析就无法当对象用。

取值后务必判断是否为 null（键不存在时返回 null，不是 undefined）
对象/数组类数据必须用 JSON.parse() 解析，且需包裹 try...catch 防止解析失败崩溃
数字建议显式转换：const count = Number(localStorage.getItem('count'))

存取值时注意作用域和有效期

localStorage 是协议 + 域名 + 端口三级作用域，http://a.com 和 https://a.com 互不可见；同源下所有标签页共享，但不同浏览器或无痕窗口完全隔离。

不能跨协议、跨子域读写（https://a.com 写的，http://a.com 读不到）
没有过期时间，除非手动调用 localStorage.removeItem() 或 localStorage.clear()
存储上限通常为 5MB 左右，超限会抛出 QuotaExceededErr or

const user = { name: 'Alice', age: 28 };
localStorage.setItem('user', JSON.stringify(user));

const saved = localStorage.getItem('user');
if (saved) {
  try {
    const parsed = JSON.parse(saved);
    console.log(parsed.name); // 'Alice'
  } catch (e) {
    console.error('JSON parse failed:', e);
  }
} else {
  console.log('Key "user" not found');
}

最常被忽略的一点：localStorage 不触发跨标签页事件监听——一个标签页改了值，其他同源标签页不会自动感知，需要自己用 storage 事件监听并手动同步状态。