js如何跨页面传值

在JavaScript中，跨页面传值可以通过多种方式实现，以下是一些常见的方法：

1. URL参数

基础概念：通过URL的查询字符串传递数据。

优势：简单易用，适用于数据量小的情况。

应用场景：从一个页面跳转到另一个页面时传递少量数据。

示例代码：

// 设置URL参数
const data = encodeURIComponent('someData');
window.location.href = `targetPage.html?data=${data}`;

// 获取URL参数
const urlParams = new URLSearchParams(window.location.search);
const data = urlParams.get('data');

2. LocalStorage

基础概念：HTML5提供的本地存储机制，可以在浏览器中存储键值对数据。

优势：数据持久化，即使浏览器关闭也不会丢失。

应用场景：需要在多个页面间共享数据，且数据不需要频繁更新。

示例代码：

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

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

3. SessionStorage

基础概念：与LocalStorage类似，但数据仅在当前会话期间有效。

优势：数据不会在不同浏览器标签页间共享，适用于单次会话的数据传递。

应用场景：需要在当前会话的多个页面间共享数据。

示例代码：

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

// 获取数据
const value = sessionStorage.getItem('key');

4. Cookie

基础概念：存储在用户浏览器中的小型数据片段，可以设置过期时间。

优势：兼容性好，适用于需要跨会话传递的数据。

应用场景：用户登录状态、购物车信息等。

示例代码：

// 设置Cookie
document.cookie = "key=value; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

// 获取Cookie
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

5. PostMessage

基础概念：HTML5引入的跨文档通信机制，可以在不同窗口或iframe之间传递消息。

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

应用场景：iframe与父页面之间的通信，或者不同域页面之间的通信。

示例代码：

// 发送消息
window.postMessage('Hello from parent', 'https://target-domain.com');

// 接收消息
window.addEventListener('message', event => {
  if (event.origin !== 'https://trusted-domain.com') return;
  console.log(event.data);
});

6. SharedWorker

基础概念：Web Worker的一种，允许多个页面共享同一个后台脚本。

优势：适用于需要在多个页面间共享复杂数据的场景。

应用场景：实时数据同步、跨页面状态管理等。

示例代码：

// main.js
const worker = new SharedWorker('worker.js');
worker.port.start();
worker.port.postMessage('Hello from main');

worker.port.addEventListener('message', event => {
  console.log(event.data);
});

// worker.js
self.addEventListener('connect', event => {
  const port = event.ports[0];
  port.addEventListener('message', event => {
    port.postMessage(`Hello from worker: ${event.data}`);
  });
  port.start();
});