javascript如何操作浏览器本地存储【教程】
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 的限制。
- 先用
try...catch捕获，避免写失败导致脚本中断 - 检查是否在反复拼接字符串存日志类数据（比如
localStorage.setItem("log", old + new)），这种容易撑爆 - 大对象别硬塞，考虑拆分、压缩或改用
indexedDB - 可粗略估算当前用量：
Object.keys(localStorage).reduce((sum, key) => sum + localStorage[key].length, 0)（单位是字符数，非字节）
真正麻烦的是序列化/反序列化的隐式失败、跨标签页同步延迟、以及 StorageEvent 只在其他标签页触发，当前页监听不到自己写的变更——这些细节不踩一次坑很难记住。
