sessionstorage在同标签页内自动保持，页面跳转不丢失，但跨域或关闭标签页会清空；需在跳转前写入、进入目标页后立即读取并清理，注意同源限制和spa中ssr/ssg的兼容性。
SessionStorage 本身就在同一个标签页内自动保持，只要不关闭该标签页，页面跳转（包括 location.href、location.replace()、表单提交、超链接点击等）都不会清空它。所以“传递参数”不是靠你手动传，而是写一次、读多次——关键在于**写入时机和读取时机要匹配，且注意跨域和协议限制**。
SessionStorage 的生命周期和适用场景
SessionStorage 是浏览器为当前标签页（tab）单独维护的存储空间，它的生命周期从页面打开开始，到该标签页被完全关闭（不是刷新或跳转）才结束。这意味着：
- 同源（相同协议 + 域名 + 端口）下的任意页面跳转，SessionStorage 数据都保留
- 新开一个标签页（即使 URL 相同）会拥有独立的 SessionStorage
- 页面刷新（F5 或
location.reload()）不会丢失数据 - 如果跳转目标是不同源（如从
http://a.com到https://a.com），则因跨协议被视为跨域，无法访问原 SessionStorage
正确写入参数：在跳转前存，而不是跳转后存
常见错误是：用户点击按钮跳转后，在新页面里才想“把上一页的参数存进去”，这已经晚了。参数应在跳转发起方（源页面）提前写入：
- 比如点击“查看详情”按钮时，先执行
sessionStorage.setItem('orderID', '12345')，再执行location.href = '/detail.html' - 如果是表单提交，可在
submit事件中设置，再让表单自然提交（注意避免重复提交） - 使用
history.pushState()或前端路由（如 Vue Router、React Router）时，也可在导航前存值
安全读取参数：进入目标页后立即检查，别依赖 DOM 加载时机
目标页面（如 detail.html）应在脚本执行早期就读取，推荐放在 <script></script> 标签内或模块顶层，不要等到 DOMContentLoaded 或 load 事件：
const orderID = sessionStorage.getItem('orderID');- 读取后建议立即用
sessionStorage.removeItem('orderID')清理，防止重复使用或状态残留（尤其涉及敏感信息或单次操作） - 务必做非空判断：
if (orderID) { /* 处理逻辑 */ }，因为用户可能直接访问该页面（没经过跳转），此时值为空
注意：SPA 路由跳转也适用，但需避开服务端渲染陷阱
在 Vue/React 等单页应用中，前端路由跳转（如 router.push('/user/123')）不会触发页面重载，SessionStorage 依然有效。但要注意：
- 服务端直出（SSR）或静态生成（SSG）的页面，首次加载是完整 HTML 请求，此时 SessionStorage 还是空的；后续前端接管路由才开始生效
- 若需服务端也能获取参数，SessionStorage 不适用，应改用 URL 查询参数（
?id=123）或 Cookie（配合 HttpOnly 和安全策略） - 调试时可打开浏览器开发者工具 → Application → Storage → Session Storage 查看实时内容，确认是否写入成功
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
