json怎么传送到另一个页面

JSON如何在网页间传递：从基础到实践的完整指南

在Web开发中，JSON（JavaScript Object Notation）因其轻量级、易读性和与JavaScript的天然兼容性，已成为数据交换的主流格式，当数据需要在多个网页页面间传递时（例如从列表页跳转到详情页、跨页面共享用户状态等），JSON的传递方法至关重要，本文将系统介绍JSON在网页间传递的核心方法、具体实现步骤及注意事项,帮助开发者这一常用技能。

理解JSON与跨页面传递的核心逻辑

什么是JSON？

JSON是一种基于文本的数据格式，采用“键值对”（Key-Value Pair）的结构组织数据，格式简洁,易于机器解析和生成。

{
  "userId": 1001,
  "username": "张三",
  "hobbies": ["阅读", "游泳"],
  "info": {
    "age": 25,
    "city": "北京"
  }
}

在JavaScript中，JSON本质是一个字符串，可通过JSON.stringify()将对象转换为JSON字符串，也可通过JSON.parse()将JSON字符串解析为对象。

跨页面传递的核心逻辑

网页间的本质是“客户端-服务器”的请求-响应模型，而跨页面传递依赖的是浏览器存储机制或URL参数，核心逻辑是：
在页面A中，将JSON数据转换为可传输的格式（字符串），通过浏览器存储或URL传递到页面B；在页面B中，再解析还原为JSON对象。

JSON跨页面传递的5种主流方法

根据数据量、安全性和实时性需求，以下是5种常用的JSON传递方法,从简单到复杂逐一说明。

方法1：URL参数传递（适用于小量数据）

通过将JSON数据编码后附加在URL的查询参数（Query String）中，实现页面跳转时的数据传递，这种方法适合传递少量数据（如ID、关键词等），但需注意URL长度限制（一般不超过2048字符）。

实现步骤：

步骤1：在页面A中，将JSON对象编码为URL参数
使用JSON.stringify()将JSON对象转为字符串，再用encodeURIComponent()编码（避免特殊字符干扰URL格式），最后拼接在URL后。

// 页面A：sender.html
const data = {
  id: 1001,
  name: "张三",
  detail: "这是一个示例用户"
};
// 1. 转为JSON字符串
const jsonString = JSON.stringify(data);
// 2. 编码URL参数（避免&、=等特殊字符冲突）
const encodedData = encodeURIComponent(jsonString);
// 3. 拼接URL并跳转
const targetUrl = `receiver.html?data=${encodedData}`;
window.location.href = targetUrl;

步骤2：在页面B中，解析URL参数还原JSON
使用URLSearchParams或正则表达式获取URL参数，再用decodeURIComponent()解码，最后通过JSON.parse()还原为对象。

// 页面B：receiver.html
// 1. 获取URL参数
const urlParams = new URLSearchParams(window.location.search);
const encodedData = urlParams.get("data");
if (encodedData) {
  // 2. 解码JSON字符串
  const jsonString = decodeURIComponent(encodedData);
  // 3. 解析为JSON对象
  const data = JSON.parse(jsonString);
  console.log("接收到的数据：", data);
  // 页面渲染（例如显示在DOM中）
  document.body.innerHTML = `
    <h1>用户详情</h1>
    <p>ID: ${data.id}</p>
    <p>姓名: ${data.name}</p>
    <p>详情: ${data.detail}</p>
  `;
}

注意事项：

• 数据量限制：URL总长度不宜超过2048字符（不同浏览器可能不同），大JSON数据会导致URL截断。
• 安全性：URL参数会暴露在地址栏，不适合传递敏感信息（如密码、token）。

方法2：localStorage/sessionStorage（适用于同源页面数据共享）

通过浏览器的本地存储（localStorage）或会话存储（sessionStorage）存储JSON数据，实现同源页面间的数据共享，两者区别在于：

• localStorage：数据持久化，除非手动清除，否则长期有效（即使关闭浏览器）。
• sessionStorage：数据仅在当前会话有效,关闭页面或浏览器后失效。

实现步骤：

步骤1：在页面A中，存储JSON数据

// 页面A：sender.html
const data = {
  id: 1001,
  name: "张三",
  timestamp: Date.now()
};
// 存储到localStorage（自动转为字符串）
localStorage.setItem("userData", JSON.stringify(data));
// 存储到sessionStorage（同理）
// sessionStorage.setItem("userData", JSON.stringify(data));
// 跳转到页面B
window.location.href = "receiver.html";

步骤2：在页面B中，读取并解析JSON数据

// 页面B：receiver.html
// 从localStorage读取
const storedData = localStorage.getItem("userData");
if (storedData) {
  // 解析为JSON对象
  const data = JSON.parse(storedData);
  console.log("从localStorage读取的数据：", data);
  // 渲染数据
  document.body.innerHTML = `
    <h1>用户数据</h1>
    <p>ID: ${data.id}</p>
    <p>姓名: ${data.name}</p>
    <p>存储时间: ${new Date(data.timestamp).toLocaleString()}</p>
  `;
}
// 从sessionStorage读取（同理）
// const sessionData = sessionStorage.getItem("userData");

注意事项：

• 同源限制：仅限同一域名、同一端口、同一协议的页面间共享（例如http://example.com/page1和http://example.com/page2可共享，但https://example.com/page1不行）。
• 存储容量：localStorage和sessionStorage的存储容量通常为5MB左右，超出会报错。
• 数据类型：存储时自动转为字符串，读取时需手动JSON.parse()。

方法3：postMessage API（适用于跨域页面通信）

当页面间存在跨域（例如https://a.com与https://b.com）或不同窗口（如弹窗、iframe）时，postMessage是安全可靠的跨页面通信方法。

实现场景：

假设页面A（https://a.com/sender.html）打开了一个跨域弹窗（https://b.com/receiver.html）,需将JSON数据传递给弹窗。

步骤1：在页面A中，发送JSON数据

// 页面A：sender.html (https://a.com/sender.html)
const data = {
  id: 1001,
  message: "来自A页面的数据"
};
// 打开跨域弹窗
const popupWindow = window.open("https://b.com/receiver.html", "_blank");
// 发送数据（需指定目标源，避免向未知窗口发送）
setTimeout(() => {
  popupWindow.postMessage(
    data, // 传递的数据（自动序列化为JSON）
    "https://b.com" // 目标源（必须与弹窗域名完全匹配）
  );
}, 1000);

步骤2：在页面B（弹窗）中，接收并处理JSON数据

// 页面B：receiver.html (https://b.com/receiver.html)
window.addEventListener("message", (event) => {
  // 安全校验：验证消息来源是否可信
  if (event.origin !== "https://a.com") {
    console.error("非法来源：", event.origin);
    return;
  }
  // 接收数据（event.data即为JSON对象）
  const receivedData = event.data;
  console.log("接收到的跨域数据：", receivedData);
  // 渲染数据
  document.body.innerHTML = `
    <h1>跨域接收的数据</h1>
    <p>ID: ${receivedData.id}</p>
    <p>消息: ${receivedData.message}</p>
  `;
});

注意事项：

• 安全校验：必须通过event.origin验证消息来源，避免恶意页面伪造消息。
• 目标源匹配：postMessage的第二个参数（目标源）需严格接收页面的域名，可设为（不推荐，存在安全风险）。

方法4：Cookie传递（适用于需要服务端参与的场景）

Cookie是服务器发送到客户端并存储在浏览器的一小块数据，可随HTTP请求自动发送到服务器，虽然Cookie主要用于服务端会话管理，但也可用于客户端页面间传递JSON数据（需配合服务端）。

实现步骤：

步骤1：在页面A中，通过Cookie存储JSON数据

// 页面A：sender.html
const data = {
  id: 1001,
  name: "张三",
  expires: Date.now() + 3600000 // 1小时后过期
};
// 转为JSON字符串并