js 跳转页面传值

在JavaScript中，跳转页面并传递数据可以通过多种方式实现，以下是一些常见的方法：

1. URL参数传递

基础概念：通过在URL后面添加查询字符串（query string）的方式传递数据。

优势：简单直观，兼容性好。

应用场景：适用于传递少量非敏感数据。

示例代码：

// 设置要传递的数据
const data = { name: 'Alice', age: 25 };
// 将数据转换为查询字符串
const queryString = new URLSearchParams(data).toString();
// 跳转到新页面并附带查询字符串
window.location.href = `targetPage.html?${queryString}`;

接收数据：

// 在目标页面中获取查询字符串并解析数据
const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get('name');
const age = urlParams.get('age');
console.log(name, age); // 输出: Alice 25

2. localStorage/sessionStorage

基础概念：使用Web Storage API在浏览器中存储数据，localStorage数据持久化，sessionStorage数据在会话结束时清除。

优势：可以存储较多数据，不会暴露在URL中。

应用场景：适用于传递较大量或敏感数据，sessionStorage适用于单个会话内的数据传递。

示例代码：

// 设置要传递的数据
const data = { name: 'Alice', age: 25 };
// 存储数据到localStorage
localStorage.setItem('userData', JSON.stringify(data));
// 跳转到新页面
window.location.href = 'targetPage.html';

接收数据：

// 在目标页面中获取并解析数据
const userData = JSON.parse(localStorage.getItem('userData'));
console.log(userData.name, userData.age); // 输出: Alice 25
// 清除数据（可选）
localStorage.removeItem('userData');

3. Cookies

基础概念：通过在客户端设置Cookies来存储数据，每次HTTP请求都会携带Cookies。

优势：可以在多个页面间共享数据，适用于需要跨页面会话保持状态的情况。

应用场景：适用于需要跨页面保持状态或传递少量数据。

示例代码：

// 设置要传递的数据
const data = { name: 'Alice', age: 25 };
// 将数据转换为JSON字符串并设置Cookie
document.cookie = `userData=${encodeURIComponent(JSON.stringify(data))}; path=/`;
// 跳转到新页面
window.location.href = 'targetPage.html';

接收数据：

// 在目标页面中获取并解析Cookie数据
const cookies = document.cookie.split(';').map(cookie => cookie.trim());
for (const cookie of cookies) {
  if (cookie.startsWith('userData=')) {
    const userData = JSON.parse(decodeURIComponent(cookie.split('=')[1]));
    console.log(userData.name, userData.age); // 输出: Alice 25
    // 清除Cookie（可选）
    document.cookie = 'userData=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
    break;
  }
}

4. PostMessage API

基础概念：用于在不同窗口或iframe之间安全地传递消息。

优势：安全性高，适用于跨域通信。

应用场景：适用于需要在不同窗口或iframe之间传递数据的场景。

示例代码：

// 发送消息的窗口
const data = { name: 'Alice', age: 25 };
const targetWindow = window.open('targetPage.html');
targetWindow.postMessage(data, '*'); // '*' 表示允许任何来源接收消息

接收数据：

// 接收消息的窗口
window.addEventListener('message', event => {
  const data = event.data;
  console.log(data.name, data.age); // 输出: Alice 25
  // 验证消息来源（可选）
  if (event.origin !== 'http://example.com') return;
});