跨页面业务逻辑流转依赖JavaScript而非HTML属性,URL参数仅适用于轻量显式上下文且需编码/解码,sessionStorage适合单次跳转复杂数据传递但需注意生命周期与兼容性,postMessage适用于双向跨页通信但须校验源并清理监听器。

跨页面业务逻辑流不能靠 HTML 属性自动串联,href、target、rel 这些属性只负责跳转行为和加载上下文,不携带或触发任何业务逻辑。真正驱动逻辑流转的是 JavaScript 层的数据传递与状态同步机制。
URL 查询参数只适合轻量、显式、可分享的业务上下文
比如商品详情页接收 pid、搜索页接收 q、分页组件接收 page。这类参数必须满足三个条件:字符串化、可编码、非敏感。
- 发送时一定要用
encodeURIComponent()编码,否则中文、空格、斜杠会破坏 URL 结构 - 接收时用
URLSearchParams解析,别直接切字符串——location.search.slice(1)容易漏掉多值或嵌套参数 -
URLSearchParams.get()返回始终是字符串,数字型参数如page=2需手动parseInt(urlParams.get('page'), 10) - 不要传 token、用户凭证、完整对象——这些会出现在浏览器历史、服务端日志、代理监控中
sessionStorage 是跳转链中传递复杂数据最稳妥的选择
它天然匹配“从 A 页面跳到 B 页面”这个动作的生命周期:数据只在本次会话标签页内有效,关闭标签即销毁,不会污染后续访问。
- 发送方存入前必须
JSON.stringify(),接收方读取后必须JSON.parse(),否则会得到null或语法错误 - 如果 B 页面不是由 A 页面跳转而来(比如用户手动输入 URL 或从书签打开),
sessionStorage.getItem()会返回null,代码里要兜底 - 不能依赖
sessionStorage在多个并行标签页间同步——每个标签页有独立的 storage 实例 - 注意 Safari 私密模式下
sessionStorage可能被禁用,需降级处理(如 fallback 到内存变量 + 提示)
window.open + postMessage 适用于需要双向控制的跨页协作场景
比如主页面弹出配置弹窗,弹窗关闭后要把结果回传;或仪表盘打开子报表页,实时推送筛选条件。这不是单次跳转,而是保持句柄、持续通信。
立即学习“前端免费学习笔记(深入)”;
- 必须保存
window.open()的返回值,它是唯一能发消息的目标引用;一旦丢失,无法再定向通信 - 接收方必须校验
event.origin,否则任意网站都能伪造消息触发你的业务逻辑 -
postMessage不支持传函数、DOM 节点、Date、RegExp等不可序列化类型,传之前先JSON.stringify()或用structuredClone()(仅现代浏览器) - 若目标页跨域,你无法读取其
contentWindow.location,但postMessage仍可用——前提是你知道它的源(targetOrigin)
最容易被忽略的是清理时机:用 sessionStorage 传参后,B 页面处理完应主动 removeItem(),避免用户刷新页面时重复消费;用 postMessage 通信时,页面卸载前最好 removeEventListener('message', handler),防止内存泄漏或旧监听器误响应。


















