localstorage是域名级持久存储，所有同源标签页共享且永不过期；sessionstorage是标签页级会话存储，仅限当前tab，关闭即清空，刷新跳转均保留。
生命周期区别不是“差不多”，而是根本设计逻辑不同：localStorage 是域名级持久存储，sessionStorage 是标签页级会话绑定——关掉那个 tab，数据就没了，没有商量余地。
sessionStorage 关闭标签页就清空，但刷新、跳转、reload 都没事
sessionStorage 的“会话”只认一个边界：当前标签页（或窗口）是否还活着。只要没手动关闭它，哪怕你反复 location.reload()、点后退/前进、甚至用 history.pushState() 切换路由，数据全都在。
- 触发清空的明确动作包括：
window.close()（仅限 script 打开的窗口）、用户点击关闭该 tab、浏览器崩溃重启（sessionStorage 不恢复） - 隐私模式下新开 tab，哪怕 URL 完全一样，
sessionStorage也是全新隔离的，互不可见 - 不要把它当“临时 localStorage”用——比如存登录态想撑过刷新，结果用户顺手右键“在新标签页中打开”，新页就读不到旧 session 数据了
localStorage 永久存在，直到你或用户主动删
localStorage 的数据跟浏览器进程、标签页数量都无关，只要同源（协议+域名+端口），所有标签页共享同一份 key-value。它不随页面关闭消失，也不随浏览器重启丢失，除非：
- 代码调用
localStorage.removeItem()或localStorage.clear() - 用户手动在浏览器设置里清除“网站数据”（含 localStorage）
- 浏览器扩展或脚本暴力清空（比如某些隐私清理工具）
注意：localStorage 没有过期机制，存进去的 token 或用户偏好不会自动失效，得靠业务代码自己加时间戳校验。
同域多标签页间，localStorage 共享，sessionStorage 彼此隔离
这是最常踩坑的点。假设你在 https://example.com/a.html 的 tab A 中执行：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
localStorage.setItem('theme', 'dark');
那么同一域名下任何其他 tab（比如 https://example.com/b.html）都能立刻读到：
localStorage.getItem('theme'); // → 'dark'
但换成 sessionStorage：
sessionStorage.setItem('draft', 'hello world');
tab B 调用 sessionStorage.getItem('draft') 一定返回 null，连监听事件（storage 事件）都不会触发——因为它们压根不在同一个会话上下文里。
存对象必须 JSON.stringify，否则会静默转成字符串
两者都只接受字符串作为值。直接存对象会调用 .toString()，结果通常是 [object Object]，取出来再 JSON.parse() 就报错。
- 正确写法：
localStorage.setItem('user', JSON.stringify({id: 1, name: 'Alice'})) - 取的时候必须配对：
JSON.parse(localStorage.getItem('user')) - 如果值可能为
null或未定义，JSON.parse(null)会直接抛错，建议加 guard：const data = localStorage.getItem('x'); return data ? JSON.parse(data) : null;
sessionStorage 和 localStorage 在这个限制上完全一致，别以为“会话级”就能松懈——类型处理漏一步，后续读取全是 undefined 或解析失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
