sessionStorage 生命周期仅限当前标签页，关闭即清空；作用域为单个 tab，同源新 tab 或 window.open 的新窗口均创建独立实例，数据不共享。
sessionStorage 是浏览器为当前标签页“专属分配”的临时存储空间，关掉这个标签页，数据立刻消失；localStorage 则是同源下所有标签页共享的“长期保险柜”，不手动删就一直留着。
sessionStorage 的生命周期和作用域怎么理解？
它只属于你当前打开的这一个 tab（或窗口），哪怕你从页面 A 用 window.location.href 跳到页面 B，或者刷新、重载、甚至崩溃后恢复，数据都还在。但只要你关掉这个 tab，sessionStorage 就被清空——连带里面存的 token、表单草稿、筛选条件，全没了。
- 同一域名下新开一个 tab（哪怕 URL 完全一样），就是全新的
sessionStorage，彼此完全不可见 -
window.open(url, '_blank')打开的新窗口，也拥有独立的sessionStorage，不是继承父窗口的 - 它不随 HTTP 请求发往服务器，纯前端自用，不会增加网络开销
localStorage 和 sessionStorage 的 API 看似一样，但行为差异在哪？
两者都用 setItem()、getItem()、removeItem()、clear()，但调用结果取决于“谁在调用”和“在哪调用”：
- 你在
https://example.com/a.html存了localStorage.setItem('theme', 'dark')，那么同源下任意其他 tab（比如/b.html或新打开的/c.html）都能立刻读到'dark' - 但如果你存的是
sessionStorage.setItem('draft', 'hello world')，只有当前 tab 能读，换一个 tab 就是null - 两者都只接受字符串值：对象必须先
JSON.stringify()，取出来再JSON.parse()；直接存{name: 'Alice'}会变成'[object Object]'
该选哪个？看三个关键问题
写代码前快速问自己：
立即学习“Java免费学习笔记（深入）”；
YXPHP6系统可以看做是一个模版平台,而且它又能独立工作. 而且YXPHP6系统也不需要数据库支持. 你可以开发自己的模板,也可以同步官方的模板后进行自己的二次开发,前提是您对YXPHP6要有一定的了解.YXPHP6不仅可以用作企业建站,甚至是blog,只要是您能想到的,YXPHP6几乎都可以胜任. 因为YXPHP6系统本身与模板之间可以说是独立运行的.也就是说,不管你做什么样的网站或者是应用,
-
这个数据需要跨标签页共享吗？ → 需要 → 用
localStorage；不需要 → 优先考虑sessionStorage -
这个数据下次打开浏览器还要用吗？ → 要 →
localStorage；不要 →sessionStorage更安全（生命周期短，攻击窗口小） -
这个数据是否可能被 XSS 盗取？ → 是（比如 token、用户 ID）→ 即使短期用，也建议配合
HttpOnlycookie + 后端验证，别只靠sessionStorage做信任依据
容易踩的坑：你以为在传参，其实只是“自嗨”
常见错误：在列表页存 sessionStorage.setItem('selectedId', '123')，然后跳转到详情页想读取——结果是 null。为什么？因为你用了新 tab 打开（target="_blank"），或者用户手动复制链接新开 tab，那已经是全新会话。
正确做法：
- 确保跳转是同 tab 内完成（如
location.href = '/detail?id=123'或history.pushState） - 或改用 URL 参数、
localStorage（注意清理时机）、或服务端 session 关联 - 别忘了加容错：
const id = sessionStorage.getItem('selectedId');
if (!id) {
console.warn('sessionStorage missing: selectedId');
// fallback to query param or redirect
}
最常被忽略的一点：sessionStorage 不是“会话级状态同步机制”，它没有跨 tab 通信能力；而 localStorage 虽然能共享，但修改不会触发当前页的 storage 事件——监听得在其他 tab 里写。
