HTML5localStorage使用教程：数据保存与读取详解

一分耕耘，一分收获！既然都打开这篇《html5本地存储localstorage怎么用_数据保存读取操作【解答】》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

LocalStorage只存字符串，存对象需JSON.stringify()、读取需JSON.parse()并加try...catch兜底；null/undefined会被转为字符串；受同源限制、无过期机制、不通知写入结果。

LocalStorage 不是“能存就随便存”，它只接受字符串，存对象不序列化会变成 [object Object]，读出来也是字符串——这是绝大多数人第一次踩的坑。

怎么安全地存对象或数组？

必须手动用 JSON.stringify() 转成字符串再存，读取时用 JSON.parse() 还原。否则存进去的是 [object Object]，取出来 JSON.parse() 会直接报错 SyntaxError: Unexpected token o in JSON at position 1。

• 存：用 localStorage.setItem('key', JSON.stringify(obj))
• 读：先用 localStorage.getItem('key') 拿字符串，再 JSON.parse()；但要加 try...catch，因为值可能被手动删改过、不是合法 JSON
• 如果解析失败，应有默认值兜底，比如 JSON.parse(localStorage.getItem('list') || '[]') 不够安全，推荐：

const data = localStorage.getItem('config');
let config = {};
try {
  config = data ? JSON.parse(data) : {};
} catch (e) {
  console.warn('localStorage config parse failed, using default');
}

为什么 localStorage.setItem('a', null) 会存成字符串 "null"？

setItem 的第二个参数会被强制转成字符串，null → "null"，undefined → "undefined"，0 → "0"，false → "false"。这不是 bug，是规范行为。

• 想存“空值”并和字符串 "null" 区分？只能存 JSON.stringify(null)（即 "null"），然后统一用 JSON.parse() 处理
• 判断是否存在，别用 if (localStorage.getItem('x')) —— 因为 "0"、"false" 都是真值；应该用 localStorage.getItem('x') !== null

浏览器限制和常见失效场景

LocalStorage 容量通常为 5MB（各浏览器略有差异），但真正容易出问题的是“同源限制”和“隐私模式”：

• 协议、域名、端口任一不同，就是不同源，数据完全隔离（http://a.com 和 https://a.com 不互通）
• Safari 在无痕模式下，localStorage 会抛 QuotaExceededError 或静默失败，连 getItem 都可能返回 null
• 部分安卓 WebView（尤其旧版）对 Unicode 或特殊字符支持差，存含 emoji 的字符串可能截断或报错
• 不要在页面加载早期（如