js怎样跨页面传递数据

在JavaScript中，有几种常见的方法可以实现跨页面的数据传递：

1. **URL查询参数**：可以在页面地址中附加参数，如`window.location.search`。从其他页面通过URL获取并解析参数，然后发送到目标页面。

// 发送数据
window.location.href = 'target.html?data=value';

// 接收数据
var urlParams = new URLSearchParams(window.location.search);
var data = urlParams.get('data');

2. **使用localStorage或sessionStorage**: 存储在浏览器本地，跨页面访问不受同源策略限制。

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
var value = localStorage.getItem('key');

3. **POST请求** (Ajax): 使用XMLHttpRequest或fetch API发起HTTP请求，在服务器端处理数据后再返回给目标页面。

// 发送AJAX请求
fetch('/api/data', {
  method: 'POST',
  body: JSON.stringify({ data: 'some value' }),
  headers: { 'Content-Type': 'application/json' },
}).then(response => response.json())
.then(data => window.parent.postMessage(data, '*')); // postMessage用于父子页面通信

// 目标页面接收数据
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://yourdomain.com') return;
  console.log(event.data);
});

4. **事件监听和发布**(Event Bus): 创建一个全局事件总线，各页面通过监听和触发事件来传递数据。

// 发布事件
document.dispatchEvent(new CustomEvent('data-event', { detail: { data: 'value' } }));

// 监听事件
window.addEventListener('data-event', function(event) {
  console.log(event.detail.data);
});