页面传值手段_html网页之间传递参数常用方法

URL参数最常用但有长度和安全限制，sessionStorage适合传对象且不暴露在地址栏，跨域必须用postMessage；URLSearchParams可安全拼接参数，避免手动拼接导致乱码或截断；sessionStorage需读完即删防刷新重复读取；postMessage须校验origin并双方实现收发逻辑。

直接说结论：URL 参数最常用但有长度和安全限制，sessionStorage 适合传对象且不暴露在地址栏，跨域必须用 postMessage，别硬塞 URL。

用 URLSearchParams 拼接参数才不容易出错

手动拼字符串 url + '?id=' + id + '&name=' + name 是高危操作——name 里带 & 或空格就断掉，中文不编码直接乱码。浏览器原生 URLSearchParams 自动处理这些：

• const params = new URLSearchParams({ id: 123, name: '张三', tags: ['a', 'b'] }); —— 数组会被转成 tags=a&tags=b
• location.href = 'detail.html?' + params.toString(); —— 安全拼接，不用手写 encodeURIComponent
• IE11 不支持，要加 polyfill；老项目可封装一个兼容函数，但别自己写正则解析 location.search
• 单个参数建议控制在 2KB 内，超长内容（比如富文本）别走 URL

sessionStorage 传对象比 URL 更干净

需要传 { userId: 1001, permissions: ['read', 'edit'], config: { theme: 'dark' } } 这种结构？URL 编码后又长又难读，sessionStorage 直接存 JSON 字符串：

• A 页面：sessionStorage.setItem('pageData', JSON.stringify(obj)); location.href = 'target.html';
• B 页面：const data = JSON.parse(sessionStorage.getItem('pageData') || '{}'); —— 必须加空值判断，否则 JSON.parse(null) 报错
• 关键点：B 页面读完立刻 sessionStorage.removeItem('pageData')，否则用户刷新页面会重复读取
• 注意生命周期：新开标签页、从书签打开、或 iframe 加载的页面，都拿不到上一页的 sessionStorage

跨域页面间传参只能靠 postMessage

从 https://a.com/a.html 跳到 https://b.com/b.html，URL 参数能传过去，但 sessionStorage、localStorage 完全隔离，读不到。这时候只有 postMessage 可用：

立即学习“前端免费学习笔记（深入）”；

• A 页面发消息前，得确认目标窗口存在：const win = window.open('https://b.com/b.html'); win.postMessage(data, 'https://b.com');
• B 页面监听：window.addEventListener('message', e => { if (e.origin === 'https://a.com') { /* 处理 e.data */ } });
• 必须校验 e.origin，不能只看 e.data，否则任意网站都能往你页面发消息
• postMessage 是异步的，A 页面发完不能假设 B 页面立刻收到；B 页面也要防多次触发（比如用户连点两次按钮）

真正容易被忽略的是场景匹配：传一个 ID 就用 URL，传整个表单数据优先考虑 sessionStorage，跨域不配合就没捷径——postMessage 的收发逻辑必须双方都写，漏一个就卡死。