html如何获取另一个页面生成的数据

在HTML页面开发中，跨页面获取另一个页面生成的数据是很常见的需求，比如表单页提交数据后结果页需要展示提交内容，或者多个关联页面需要共享用户操作产生的信息。下面介绍几种常用的实现方式。

一、使用localStorage实现同域页面数据传递

localStorage是浏览器提供的本地存储机制，存储的数据在同域下的所有页面都可以访问，适合同域下多个页面共享数据的场景。另一个页面生成数据后存入localStorage，当前页面再从localStorage中读取即可。

另一个页面（数据生成页）的存储代码示例：

// 数据生成页：生成用户提交的用户名数据并存储
const userName = "张三";
// 将数据存入localStorage，键名为user_info
localStorage.setItem("user_info", JSON.stringify({ name: userName, age: 20 }));

当前页面（数据获取页）的读取代码示例：

// 数据获取页：从localStorage读取另一个页面存储的数据
const storedData = localStorage.getItem("user_info");
if (storedData) {
    const userInfo = JSON.parse(storedData);
    console.log("获取到的用户名称：", userInfo.name);
    // 将数据显示到页面中
    document.getElementById("show-name").innerText = userInfo.name;
} else {
    console.log("未找到对应的存储数据");
}

这种方式的优点是存储持久，页面刷新后数据不会丢失，缺点是仅支持同域页面，且存储大小有限制，一般不超过5MB。

二、通过URL参数传递数据

如果另一个页面生成的数据量较小，也可以将数据拼接在URL的参数中，当前页面通过解析URL参数获取对应数据，适合临时传递少量数据的场景。

另一个页面生成数据后跳转并携带参数的示例：

// 数据生成页：生成订单号后跳转到结果页，携带订单号参数
const orderId = "202405001";
// 跳转到结果页，将订单号作为query参数拼接在URL后
window.location.href = `result.html?order_id=${encodeURIComponent(orderId)}`;

当前页面解析URL参数获取数据的示例：

// 数据获取页：解析URL中的参数获取订单号
function getUrlParam(paramName) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(paramName);
}
const targetOrderId = getUrlParam("order_id");
if (targetOrderId) {
    console.log("获取到的订单号：", targetOrderId);
    document.getElementById("order-id").innerText = targetOrderId;
}

这种方式不需要额外的存储机制，实现简单，但是参数会暴露在URL中，不适合传递敏感数据，且数据长度受URL长度限制。

三、使用fetch API获取另一个页面的接口数据

如果另一个页面生成的数据是通过后端接口返回，或者另一个页面本身提供了可访问的数据接口，当前页面可以使用fetch API发起请求获取数据，支持同域和跨域（需要服务端配置跨域允许）。

假设另一个页面所在的服务端提供了/api/get_page_data接口，返回JSON格式的数据，当前页面的获取示例如下：

// 当前页面：使用fetch请求获取另一个页面的接口数据
fetch("http://ipipp.com/api/get_page_data")
    .then(response => {
        // 判断响应状态是否正常
        if (!response.ok) {
            throw new Error("请求失败，状态码：" + response.status);
        }
        return response.json();
    })
    .then(data => {
        console.log("获取到的接口数据：", data);
        // 处理返回的数据，比如渲染到页面
        document.getElementById("data-content").innerText = data.content;
    })
    .catch(error => {
        console.error("获取数据出错：", error);
    });

如果是跨域请求，需要服务端设置对应的CORS响应头，比如Access-Control-Allow-Origin允许当前页面的域名访问，否则请求会被浏览器拦截。

四、不同方式的适用场景总结

可以根据实际需求选择合适的方式，以下是几种方式的对比：

实际开发中可以根据数据的敏感程度、数据量大小、页面是否同域等条件选择最合适的实现方案，确保数据传递的稳定性和安全性。

HTMLJavaScriptfetch_API跨页面数据传递localStorage修改时间：2026-07-09 13:57:27