localstorage.getitem 返回 null 通常因键不存在、拼写错误或未存入值；存对象需 json.stringify，取时用 json.parse 并加 try/catch；配额超限会静默失败；storage 事件仅响应其他标签页变更。
getItem 读取值时为什么返回 null
调用 localStorage.getItem('key') 返回 null，通常不是因为键不存在，而是因为值根本没存进去，或者存的是 undefined / null（它们会被自动转成字符串 "undefined" 或 "null"，但读取逻辑没问题）；更常见的是拼写错误——比如存的时候用 'user_id'，读的时候写了 'userId'。
实操建议：
- 先用浏览器开发者工具的 Application → Storage → Local Storage 面板手动确认键是否存在、值是否非空
- 不要直接依赖
getItem返回值做逻辑判断，加一层存在性检查：const value = localStorage.getItem('token');<br>if (value === null) {<br> // 确实没存过，不是空字符串也不是 "null"<br>} - 注意大小写敏感：键名
'Token'和'token'是两个完全不同的键
setItem 存对象或数组会出错吗
会。直接传对象或数组给 localStorage.setItem('data', {name: 'Alice'}) 不报错，但实际存进去的是 "[object Object]" —— 因为 setItem 只接受字符串作为第二个参数，其他类型会隐式调用 .toString()。
正确做法是序列化：
- 存前用
JSON.stringify()：localStorage.setItem('user', JSON.stringify({id: 123, name: 'Alice'})); - 取后用
JSON.parse()，但必须加try/catch，因为数据可能被手动篡改或损坏：try {<br> const user = JSON.parse(localStorage.getItem('user') || 'null');<br> if (user && typeof user === 'object') { /* 安全使用 */ }<br>} catch (e) { /* 解析失败，按默认值处理 */ } - 避免存函数、Date、RegExp 等无法被
JSON.stringify正确处理的值
setItem 失败却没报错？可能是配额超了
localStorage.setItem 在存储空间不足时不会抛异常，而是静默失败（尤其在 iOS Safari 移动端，配额常只有 5–10MB，且含所有同源数据）。你调用后立刻 getItem，发现还是旧值或 null，大概率是写入失败。
排查和应对：
- 用
try...catch包裹setItem并监听QuotaExceededError（部分浏览器支持）：try {<br> localStorage.setItem('hugeData', bigString);<br>} catch (e) {<br> if (e.name === 'QuotaExceededError') {<br> console.warn('localStorage quota exceeded');<br> }<br>} - 写入前可粗略估算：字符串长度 ≈ 字节数（UTF-8 下中文约 3 字节/字），留 20% 余量
- 长期方案：对大块数据考虑压缩（如
lz-string）、分片存储，或降级到indexedDB
跨标签页监听 localStorage 变化
localStorage 本身不触发当前页面的变更事件，但浏览器会在**其他同源标签页**调用 setItem 或 removeItem 后，向当前页面广播 storage 事件。
监听要点：
- 事件只在「其他」标签页修改时触发，本页修改不会触发本页的该事件
- 监听需挂载在
window上：window.addEventListener('storage', (e) => {<br> console.log(e.key, e.oldValue, e.newValue, e.url);<br>}); -
e.key是被修改的键名，e.oldValue/e.newValue是字符串形式的前后值（注意：删除时newValue为null，oldValue是原值） - 不要在该事件里再调用
setItem，否则可能引发循环或竞态（比如两个标签页互相响应、反复写）
真正容易被忽略的是：localStorage 的值始终是字符串，无论你怎么存、怎么读；所有类型转换（JSON 序列化/解析、数字转字符串等）都得自己显式控制。一旦漏掉某处 JSON.parse 或误把 undefined 当空值处理，bug 就藏在看似“什么都没做”的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
