html页面间传数据

HTML页面间传数据方法详解

URL参数传递

说明：通过拼接URL参数（?key=value）传递数据，适用于简单数据传递。
示例：

<!-页面A -->
<script>
  const data = { name: "Alice", age: 25 };
  const params = new URLSearchParams(data).toString();
  window.location.href = `pageB.html?${params}`;
</script>

<!-页面B -->
<script>
  const urlParams = new URLSearchParams(window.location.search);
  const name = urlParams.get("name"); // Alice
  const age = urlParams.get("age"); // 25
</script>

优点：简单易用，无需额外存储。
缺点：数据暴露在URL中，安全性差；长度受限（约2048字符）。

Cookie传递

说明：通过设置Cookie存储数据，浏览器自动携带Cookie。
示例：

// 设置Cookie
document.cookie = "username=John; path=/; max-age=60";

// 读取Cookie
function getCookie(name) {
  const match = document.cookie.match(new RegExp(`${name}=([^;]+)`));
  return match ? match[1] : null;
}
console.log(getCookie("username")); // John

优点：持久化存储，可跨页面共享。
缺点：大小限制（约4KB），需注意隐私和安全（如HttpOnly）。

LocalStorage/SessionStorage

说明：使用localStorage（持久化）或sessionStorage（会话级）存储数据。
示例：

// 存储数据
localStorage.setItem("token", "abc123");

// 读取数据
const token = localStorage.getItem("token"); // abc123

优点：容量大（约5MB），操作简单。
缺点：localStorage数据长期存在，sessionStorage仅在标签页存活期间有效。

表单提交

说明：通过表单的action属性跳转并传递数据。
示例：

<form action="pageB.html" method="GET">
  <input type="text" name="username" value="Alice" />
  <button type="submit">提交</button>
</form>

优点：兼容所有浏览器，适合传统表单场景。
缺点：依赖后端处理,刷新页面会重复提交。

Web API（如IndexedDB）

说明：使用IndexedDB存储复杂数据（如对象、二进制数据）。
示例：

// 存储数据
const db = indexedDB.open("myDB");
db.onsuccess = () => {
  const transaction = db.result.transaction("data", "readwrite");
  transaction.objectStore("data").put({ key: "user", value: { name: "Bob" } });
};

优点：支持大容量和复杂数据类型。
缺点：API复杂,需处理异步操作。

方法对比表

相关问题与解答

问题1：如何安全传递敏感数据（如密码）？

解答：

• 避免明文传输：使用HTTPS加密通信，防止数据被窃取。
• 后端处理：敏感数据应通过POST请求提交到服务器，由服务器处理并存储。
• 临时存储：若必须前端存储，优先使用sessionStorage并设置短期过期时间。

问题2：如何选择页面传值方法？

解答：

• 简单数据：优先URL参数或Cookie。
• 大量/复杂数据：使用LocalStorage或IndexedDB。
• 敏感数据：依赖服务器处理，避免前端存储。
• 短期数据：sessionStorage