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 的字符串可能截断或报错
不要在页面加载早期（如同步执行时）直接操作，某些嵌入式环境可能未就绪