json怎么传到另一个页面

JSON数据如何在前端页面间传递：实用方法详解

在Web开发中,JSON（JavaScript Object Notation）因其轻量级、易读性和与JavaScript的天然兼容性，成为前后端数据交互的主流格式，而在前端页面间传递JSON数据，也是动态网页开发中的常见需求，本文将详细介绍几种实用的JSON数据传递方法，从基础到进阶，帮助开发者根据场景选择最合适的方案。

URL查询参数传递JSON（适用于少量数据）

URL查询参数是页面间传递数据最简单的方式,尤其适合传递少量JSON数据，通过将JSON对象序列化为字符串，附加在URL的之后，目标页面可通过解析URL参数获取数据。

实现步骤：

1. 序列化JSON为字符串
   使用JSON.stringify()将JSON对象转为字符串，并使用encodeURIComponent()编码，避免特殊字符（如&、）影响URL解析。

   const data = { name: "张三", age: 25, city: "北京" };
   const jsonData = JSON.stringify(data);
   const encodedData = encodeURIComponent(jsonData);

2. 跳转页面并携带参数
   使用window.location.href或window.open()跳转，将编码后的JSON字符串作为参数传递：

   // 当前页面跳转
   window.location.href = `target.html?data=${encodedData}`;
   // 或新窗口打开
   window.open(`target.html?data=${encodedData}`, "_blank");

3. 目标页面解析参数
   在目标页面中，通过URLSearchParams或正则表达式获取参数值，再反序列化为JSON对象：

   // 方法1：URLSearchParams（推荐）
   const urlParams = new URLSearchParams(window.location.search);
   const encodedData = urlParams.get("data");
   if (encodedData) {
     const originalData = JSON.parse(decodeURIComponent(encodedData));
     console.log(originalData); // { name: "张三", age: 25, city: "北京" }
   }
   // 方法2：正则解析（兼容旧浏览器）
   const regex = /[?&]data=([^&]*)/;
   const match = window.location.search.match(regex);
   if (match) {
     const originalData = JSON.parse(decodeURIComponent(match[1]));
     console.log(originalData);
   }

注意事项：

• URL长度有限制（通常不超过2048字符），仅适合传递少量JSON数据。
• 需对JSON字符串进行编码,避免特殊字符破坏URL结构。

LocalStorage/SessionStorage存储JSON（适用于同源页面间数据共享）

如果需要在同源（协议、域名、端口相同）的多个页面间共享JSON数据，且数据不需要实时传递，可以使用浏览器提供的localStorage（持久化存储，长期有效）或sessionStorage（会话级存储，关闭标签页失效）。

实现步骤：

1. 存储JSON数据
   在源页面将JSON对象转为字符串后存入存储：

   const data = { id: 1001, product: "笔记本电脑", price: 5999 };
   // 存入localStorage（长期有效）
   localStorage.setItem("sharedData", JSON.stringify(data));
   // 或存入sessionStorage（会话级有效）
   sessionStorage.setItem("sharedData", JSON.stringify(data));

2. 目标页面读取数据
   在目标页面中直接读取存储的字符串并反序列化：

   // 从localStorage读取
   const storedData = localStorage.getItem("sharedData");
   if (storedData) {
     const originalData = JSON.parse(storedData);
     console.log(originalData); // { id: 1001, product: "笔记本电脑", price: 5999 }
   }
   // 从sessionStorage读取
   const sessionData = sessionStorage.getItem("sharedData");
   if (sessionData) {
     const originalData = JSON.parse(sessionData);
     console.log(originalData);
   }

注意事项：

• 仅限同源页面使用,跨域页面无法访问对方的localStorage/sessionStorage。
• localStorage存储上限约5MB（不同浏览器略有差异），适合存储中等规模数据。
• 数据更新时需手动调用setItem()覆盖旧值，无自动同步机制。

PostMessage API传递JSON（适用于跨域/跨窗口通信）

当需要在跨域页面、不同窗口或iframe之间传递JSON数据时，postMessage API是标准解决方案，它允许不同源的文档进行安全通信，避免跨域限制问题。

实现步骤：

1. 发送方（源页面）传递数据
   使用window.postMessage()方法发送JSON数据，需指定目标窗口的引用和目标源（可选，增强安全性）：

   const data = { message: "跨域传递的JSON数据", timestamp: Date.now() };
   // 假设目标窗口是通过window.open()打开的，或获取iframe的contentWindow
   const targetWindow = window.open("https://target-domain.com/page.html", "_blank");
   // 或获取iframe元素
   // const targetWindow = document.getElementById("myFrame").contentWindow;
   // 发送数据（第二个参数为目标源，限制仅特定源可接收，"*"表示所有源）
   targetWindow.postMessage(data, "https://target-domain.com");

2. 接收方（目标页面）监听消息
   在目标页面中监听message事件，通过event.data获取传递的JSON数据，并通过event.origin验证发送方源（防止恶意攻击）：

   window.addEventListener("message", (event) => {
     // 验证发送方源（可选但推荐）
     if (event.origin !== "https://source-domain.com") {
       return; // 忽略非信任源的消息
     }
     // 获取传递的JSON数据
     const receivedData = event.data;
     console.log(receivedData); // { message: "跨域传递的JSON数据", timestamp: 1625123456789 }
     // 处理数据（如更新页面内容）
     document.getElementById("result").textContent = receivedData.message;
   });

注意事项：

• 必须验证event.origin，避免恶意页面发送伪造数据。
• 目标窗口需是已打开的（如window.open()的结果或iframe），无法直接向任意URL发送消息。
• 数据量较大时需注意性能,postMessage本身无大小限制，但需考虑浏览器内存。

全局变量传递JSON（适用于简单场景，不推荐生产环境）

在极端简单的场景下（如单页应用内通过<a>标签跳转），可通过将JSON数据挂载到window对象上实现传递，但这种方法存在全局污染风险，仅适用于临时调试或小型项目。

实现步骤：

1. 源页面将JSON数据存入全局变量

   const data = { token: "abc123", userId: 5002 };
   window.sharedData = data; // 挂载到window对象

2. 目标页面读取全局变量

   // 直接从window对象获取
   const originalData = window.sharedData;
   console.log(originalData); // { token: "abc123", userId: 5002 }

注意事项：

• 全局变量会污染window对象，容易与其他脚本冲突，生产环境不推荐。
• 仅适用于同源、同窗口的简单跳转，无法跨域或跨窗口使用。

前端路由传递JSON（适用于单页应用）

在单页应用（SPA）中，前端路由（如React Router、Vue Router）是管理页面跳转的核心，传递JSON数据可通过路由参数或状态管理（如Redux、Vuex）实现。

路由参数传递（适用于少量数据）

以React Router为例，通过useNavigate和useParams传递JSON：

// 源组件
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
const data = { page: 2, filters: { category: "electronics" } };
// 序列化后通过路由参数传递
navigate(`/target?data=${encodeURIComponent(JSON.stringify(data))}`);
// 目标组件
import { useParams, useLocation } from "react-router-dom";
function TargetPage() {
  const location = useLocation();
  const urlParams = new URLSearchParams(location.search);
  const encodedData = urlParams.get("data");
  useEffect(() => {
    if (encodedData) {
      const originalData = JSON.parse(decodeURIComponent(encodedData));
      console.log(originalData);
    }
  }, [encodedData]);
  return <div>目标页面</div>;
}

状态管理传递（适用于复杂数据）

对于需要跨组件共享的JSON数据,可使用Redux等状态管理工具：

// Redux Action
export const passData = (data) => ({
  type