js跨页面数据传输

在JavaScript中，跨页面数据传输是指在不同的网页或窗口之间传递数据。以下是一些常见的方法和它们的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案：

1. URL参数

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

优势：简单易用。劣势：数据量有限，安全性较低。 应用场景：传递少量非敏感数据。

示例代码：

// 发送页面
const data = encodeURIComponent('Hello World');
window.location.href = `targetPage.html?data=${data}`;

// 接收页面
const urlParams = new URLSearchParams(window.location.search);
const data = urlParams.get('data');
console.log(data); // 输出: Hello World

2. LocalStorage

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

优势：数据持久化，容量较大（通常5MB）。劣势：仅限于同源页面。 应用场景：存储用户偏好设置、缓存数据等。

示例代码：

// 发送页面
localStorage.setItem('data', 'Hello World');

// 接收页面
const data = localStorage.getItem('data');
console.log(data); // 输出: Hello World

3. SessionStorage

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

优势：数据在会话结束后自动清除，安全性较高。劣势：仅限于同源页面。 应用场景：存储临时数据，如表单数据。

示例代码：

// 发送页面
sessionStorage.setItem('data', 'Hello World');

// 接收页面
const data = sessionStorage.getItem('data');
console.log(data); // 输出: Hello World

4. Cookie

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

优势：兼容性好，可以跨子域名共享。劣势：容量有限（通常4KB），每次HTTP请求都会携带。 应用场景：存储用户身份验证信息、会话ID等。

示例代码：

// 发送页面
document.cookie = "data=Hello World; path=/";

// 接收页面
const cookies = document.cookie.split(';').map(cookie => cookie.trim());
cookies.forEach(cookie => {
  const [key, value] = cookie.split('=');
  if (key === 'data') {
    console.log(value); // 输出: Hello World
  }
});

5. PostMessage

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

优势：安全性高，支持跨域通信。劣势：需要目标窗口或iframe的引用。 应用场景：跨域iframe通信、多窗口协作。

示例代码：

// 发送页面
const targetWindow = window.open('targetPage.html');
targetWindow.postMessage('Hello World', 'https://target-domain.com');

// 接收页面
window.addEventListener('message', event => {
  if (event.origin === 'https://sender-domain.com') {
    console.log(event.data); // 输出: Hello World
  }
});