在html中如何获取其他页面传过来的值

urlsearchparams 是解析 url 参数最直接的方式，能正确处理编码、重复键和无值参数；跨页面传值优先用 sessionstorage（同源、自动清理），跨域则必须用 postmessage 并校验 origin。

用 URLSearchParams 解析地址栏参数最直接

浏览器地址栏里的 ?id=123&name=test 这类值，本质就是字符串，URLSearchParams 是现代浏览器原生支持的解析工具，不用引入第三方库，也不用自己写正则拆解。

常见错误是手动用 .split("?")[1].split("&")，一来容易漏掉 URL 编码（比如空格变 %20），二来遇到重复键、无值参数（?debug）就出错。

• 直接用 new URLSearchParams(window.location.search) 创建实例
• .get("id") 拿单个值（返回 NULL 而不是 undefined）
• .getAll("tag") 拿重复参数（如 ?tag=a&tag=b）
• 注意：window.location.search 开头自带 ?，URLSearchParams 能正确处理

const params = new URLSearchParams(window.location.search); console.log(params.get("user_id")); // "456"

跨页面传值不能只靠 URL——sessionStorage 更可靠

URL 参数适合传简单、非敏感、可被用户看到和修改的值；如果要传对象、长文本或不想暴露在地址栏里，sessionStorage 是更稳妥的选择。

典型场景：A 页面跳转前存数据，B 页面加载时读取。它比 localStorage 安全些——关闭标签页自动清空，不会跨会话污染。

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

• 存的时候必须是字符串：sessionStorage.setItem("cart", jsON.stringify(cartData))
• 读的时候记得 json.parse()，否则拿到的是字符串而非对象
• 注意同源限制：协议、域名、端口都相同才可访问，https://a.com 和 http://a.com 互相读不到
• 别依赖 sessionStorage 传大量数据（chrome 限制约 5MB，但实际建议控制在几百 KB 内）

postMessage 是唯一能跨域传值的合法方式

如果目标页面是不同源的（比如嵌在 <iframe></iframe> 里的第三方页面，或通过 window.open 打开的外部站点），URL 和 sessionStorage 都会失败，这时只能用 postMessage。

它不是“自动传值”，而是需要双方主动配合：发送方调用 postMessage，接收方监听 message 事件并校验来源。

• 发送方必须指定 targetOrigin，写 "*" 有安全风险，应明确写成 "https://other-site.com"
• 接收方必须检查 Event.origin，防止恶意站点伪造消息
• 传递的数据会自动序列化，但函数、dom 节点等无法传输，只支持结构化克隆支持的类型
• 没有内置重试或确认机制，发了就发了，收没收到得自己加逻辑

// 发送方 iframe.contentWindow.postMessage({ type: "login_user", id: 789 }, "https://other-site.com");

容易被忽略的细节：页面还没加载完就读 location.search？

如果把读参数的代码放在 <script></script> 标签里且没加 defer 或放在