JavaScript本地存储核心是localStorage和sessionStorage,均只存字符串,存对象需JSON.stringify()、取时用JSON.parse();localStorage同源永久保存,sessionStorage仅限当前标签页;超限时抛QuotaExceededError,需捕获并优化存储策略。

JavaScript 操作浏览器本地存储,核心就两条路:localStorage 和 sessionStorage,它们都只存字符串,存对象必须手动 JSON.stringify(),取出来得 JSON.parse()——漏掉这一步,90% 的“存了取不出”问题就来了。
为什么 localStorage.setItem() 存的对象变成 [object Object]
因为 setItem() 第二个参数强制转成字符串,{name: "Alice"} 直接传进去就调用了 .toString(),结果就是 "[object Object]"。
- 正确做法:存之前用
JSON.stringify(),比如localStorage.setItem("user", JSON.stringify({name: "Alice"})) - 取的时候必须配对使用
JSON.parse(),比如const user = JSON.parse(localStorage.getItem("user")) - 如果值可能是
null(比如键不存在),先判空再parse,否则报SyntaxError: Unexpected token o in JSON at position 1
localStorage 和 sessionStorage 到底该用哪个
-
localStorage:同源下永久存在,关浏览器、重启电脑都不丢,除非手动clear()或用户清缓存 -
sessionStorage:仅当前标签页有效,关闭该标签页即销毁;新开同 URL 标签页也是全新独立的sessionStorage - 两者 API 完全一致(
setItem/getItem/removeItem/clear),不能跨协议、跨子域访问(https://a.example.com和https://b.example.com是不同源)
遇到 QuotaExceededError 怎么办
这是存储超限的错误,主流浏览器限额约 5–10 MB(注意:是整个 origin 的总和,含 localStorage、sessionStorage、甚至部分 indexedDB 计入),不是单个 key 的限制。
立即学习“Java免费学习笔记(深入)”;
- 先用
try...catch捕获,避免写失败导致脚本中断 - 检查是否在反复拼接字符串存日志类数据(比如
localStorage.setItem("log", old + new)),这种容易撑爆 - 大对象别硬塞,考虑拆分、压缩或改用
indexedDB - 可粗略估算当前用量:
Object.keys(localStorage).reduce((sum, key) => sum + localStorage[key].length, 0)(单位是字符数,非字节)
真正麻烦的是序列化/反序列化的隐式失败、跨标签页同步延迟、以及 StorageEvent 只在其他标签页触发,当前页监听不到自己写的变更——这些细节不踩一次坑很难记住。











