localStorage永久存储且同源标签页共享，关闭浏览器或重启后仍存在；sessionStorage仅限当前标签页，关闭该tab即清空，刷新、跳转均保留，同域名新标签页互不共享。
sessionStorage 和 localStorage 的行为差异，核心就两点：数据能活多久、在哪些页面间能被访问到。图解不是画个流程图就行，关键是把“什么时候写入”“关了哪个窗口会丢”“同域名多个标签页怎么共享”这些实际开发中容易踩坑的点说清楚。
生命周期：关页面时谁留谁走
localStorage 的数据不随任何页面关闭而消失——关掉当前标签页、关掉整个浏览器、甚至重启电脑，只要没手动清除或代码删除，它就在那儿。sessionStorage 则严格绑定在单个浏览器标签页（tab）上：刷新页面？数据还在；关掉这个 tab？立刻清空；新开一个同网址的 tab？那是全新的 sessionStorage，跟刚才那个完全无关。
- localStorage：适合存主题偏好、语言设置、用户是否看过引导页这类“下次打开还要用”的信息
- sessionStorage：适合存表单草稿、临时筛选条件、支付流程中的中间状态——只服务于当前这一轮操作，关掉就放弃，不遗留
作用域：同域名下谁和谁共享
localStorage 在同一协议 + 域名 + 端口（即同源）的所有页面、所有标签页、所有 iframe（同源）之间完全共享。你在 A 标签页存了 userToken，B 标签页直接 getItem 就能拿到。
sessionStorage 只在“同一个顶级浏览上下文”里有效。简单说：只有同一个 tab 里的页面（包括它里面的同源 iframe）能共用一份 sessionStorage。开两个 tab 访问同一网址，它们的 sessionStorage 是彼此隔离的两份独立空间。
- 注意：iframe 如果是同源的，它和父页面可以共享 sessionStorage（前提是它们属于同一个 top-level tab）
- 注意：浏览器隐私模式下，部分浏览器会禁用或重置 sessionStorage 和 localStorage，需实测兼容性
读写方式与数据类型限制
两者 API 完全一致：setItem、getItem、removeItem、clear。但都只能存字符串——想存对象或数组，必须先 JSON.stringify，读取时再 JSON.parse，且要加 try/catch 防止解析失败崩溃。
- 错误示范：
localStorage.setItem('cart', [{id:1, qty:2}])→ 实际存的是[object Object] - 正确做法：
localStorage.setItem('cart', JSON.stringify([{id:1, qty:2}])) - 读取后务必检查是否为 null 或解析是否成功，避免后续逻辑报错
容量与安全性共性
两者容量基本都是 5MB 左右（不同浏览器略有浮动），远大于 Cookie 的 4KB；都不参与 HTTP 请求，不会增加请求头体积；都受同源策略限制，跨域页面无法互相读写；都不具备内置加密能力，敏感信息（如 token）若必须本地存，应配合前端加密或仅作短期缓存，并优先交由 HttpOnly Cookie + 后端 session 管理。
- 不要存密码、银行卡号、完整 JWT —— 即使加密，也比不上服务端 session 的可控性
- 定期调用 length 和 key() 检查存储项数量，避免无节制写入导致满容异常
