html如何对接html_实现两个HTML页面的数据对接【两个】

跨页面通信有四种方法：一、URL参数传递少量字符串数据；二、localStorage实现同源双向持久化共享；三、postMessage支持跨窗口安全异步通信；四、BroadcastChannel实现同源多页面广播通信。

如果您希望在两个独立的 HTML 页面之间实现数据传递与共享，则需要借助浏览器提供的跨页面通信机制。以下是实现此目标的多种方法：

一、通过 URL 参数传递数据

该方法适用于从一个页面向另一个页面单向传递少量字符串数据，利用浏览器地址栏的查询参数（query string）进行信息携带，接收方页面解析 URL 即可获取数据。

1、在源页面中构造带参数的目标链接，例如：window.location.href = "page2.html?name=张三&id=1001"。

2、在目标页面（page2.html）中使用 JavaScript 获取 URL 查询参数，例如：const urlParams = new URLSearchParams(window.location.search)。

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

3、读取指定参数值，例如：const userName = urlParams.get("name")，此时 userName 的值为 "张三"。

4、将获取的数据用于页面渲染或后续逻辑处理，例如：document.getElementById("display").textContent = userName。

二、通过 localStorage 实现双向持久化共享

该方法利用浏览器本地存储空间，在两个页面均能访问同一 localStorage 域的前提下，通过监听 storage 事件实现实时数据同步，适合需多次读写且要求页面刷新后仍保留数据的场景。

1、在源页面中写入数据，例如：localStorage.setItem("sharedData", JSON.stringify({msg: "Hello from page1", timestamp: Date.now()}))。

2、在目标页面中监听 storage 变更事件，例如：window.addEventListener("storage", (e) => { if (e.key === "sharedData") { console.log("收到新数据：", JSON.parse(e.newValue)); } })。

3、目标页面也可主动读取当前值，例如：const data = JSON.parse(localStorage.getItem("sharedData"))。

4、确保两个 HTML 文件运行于同源环境（相同协议、域名、端口），否则 localStorage 不可跨域访问。

标签： javascript java html js json 浏览器 端口 win 跨域 red