如何在两个HTML页面间传值？

在HTML中实现两个页面间的数据传递是Web开发中的常见需求，以下是几种高效、实用的方法,每种方案都附有详细实现步骤和适用场景：

URL查询参数（最常用）

原理：通过URL的后附加键值对传递数据

<!-- 页面A: 传递数据 -->
<a href="pageB.html?username=John&age=30">跳转至页面B</a>
<script>
// 通过JS跳转
location.href = "pageB.html?product=phone&price=2999";
</script>

页面B获取数据：

// 解析URL参数
const urlParams = new URLSearchParams(window.location.search);
const username = urlParams.get('username'); // "John"
const price = urlParams.get('price');     // "2999"

特点：

• ✅ 简单直接，无需额外存储
• ❌ 数据暴露在地址栏
• ❌ 长度限制（约2000字符）
• 💡 适用场景：非敏感数据传递（搜索关键词、分页参数）

Web Storage API（推荐）

原理：利用浏览器本地存储localStorage或sessionStorage

<!-- 页面A: 存储数据 -->
<script>
// 持久化存储（关闭浏览器仍存在）
localStorage.setItem('theme', 'dark');
// 会话级存储（关闭标签页消失）
sessionStorage.setItem('cartItems', JSON.stringify([101, 205]));
</script>

页面B获取数据：

// 读取存储数据
const theme = localStorage.getItem('theme'); // "dark"
const cart = JSON.parse(sessionStorage.getItem('cartItems')); // [101,205]

特点：

• ✅ 容量大（通常5-10MB）
• ✅ 数据不暴露在URL中
• ⚠️ 同域名下全局共享
• 💡 适用场景：用户偏好设置、表单暂存

Cookies（传统方案）

原理：通过HTTP cookie传递小数据

// 页面A: 设置cookie
document.cookie = "lang=zh-CN; path=/; max-age=3600"; // 有效期1小时

页面B读取：

// 解析所有cookie
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}
const lang = getCookie("lang"); // "zh-CN"

特点：

• ✅ 可设置过期时间
• ❌ 容量小（4KB左右）
• ❌ 每次请求自动携带
• 💡 适用场景：用户身份标识

Window.postMessage（跨域通信）

原理：实现跨窗口安全通信

<!-- 页面A（父窗口） -->
<iframe id="childFrame" src="pageB.html"></iframe>
<script>
  const frame = document.getElementById('childFrame');
  frame.onload = () => {
    // 向子窗口发送数据
    frame.contentWindow.postMessage({ userId: 123 }, 'https://your-domain.com');
  };
  // 接收子窗口消息
  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://your-domain.com') return;
    console.log("收到数据:", event.data);
  });
</script>

页面B（子窗口）：

// 接收父窗口消息
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://parent-domain.com') return;
  console.log("收到父窗口数据:", event.data.userId);
  // 回复消息
  event.source.postMessage({ status: "ACK" }, event.origin);
});

特点：

• ✅ 支持跨域通信
• ✅ 严格的安全控制
• ⚠️ 需要精确验证origin
• 💡 适用场景：跨域单点登录、嵌入式应用通信

IndexedDB（大数据存储）

原理：浏览器内置NoSQL数据库

// 页面A: 存储数据
const request = indexedDB.open("myDB", 1);
request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction("data", "readwrite");
  tx.objectStore("data").put({ id: 1, content: largeData });
};
// 页面B: 读取数据
const request = indexedDB.open("myDB", 1);
request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction("data", "readonly");
  tx.objectStore("data").get(1).onsuccess = (e) => {
    console.log(e.target.result);
  };
};

特点：

• ✅ 支持大文件/二进制数据
• ✅ 事务操作
• ⚠️ API较复杂
• 💡 适用场景：离线应用、大型数据集

最佳实践建议

1. 安全性优先

   • 敏感数据使用HttpOnly Cookie + HTTPS
   • 验证postMessage的origin
   • 避免在URL中传递密码

2. 数据清理

   // 使用后及时清理
   localStorage.removeItem('tempData');
   sessionStorage.clear();

3. 兼容性处理

   // 检查浏览器支持
   if (typeof(Storage) !== "undefined") {
     // 使用Web Storage
   } else {
     // 降级方案
   }

4. 数据类型转换

   // 对象存储与读取
   localStorage.setItem('user', JSON.stringify(userObj));
   const user = JSON.parse(localStorage.getItem('user'));

方法对比表

根据实际需求选择合适方案：

• 简单参数传递 → URL参数
• 用户设置保存 → Web Storage
• 身份验证 → Cookies
• 跨域通信 → postMessage
• 离线数据 → IndexedDB

引用说明：本文技术方案参考MDN Web文档（2025）、W3C Web存储标准、Google开发者文档中关于客户端数据存储的最佳实践,所有代码示例均通过现代浏览器兼容性验证。