在HTML多页面应用开发中，表单数据的跨页面传递是常见需求，比如用户在第一个页面输入邮箱后，需要在第二个页面展示或处理该邮箱信息。下面介绍几种常用的实现方式，每种方式都附带完整的代码示例。
一、通过URL参数传递
这种方式是通过表单的GET提交，将输入值拼接在URL的查询参数中，第二个页面从URL中解析参数即可获取值，适合传递非敏感的小型数据。
第一个页面（输入页）
创建一个简单的表单，设置提交方式为GET，提交地址为第二个页面的路径：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>输入邮箱页面</title>
</head>
<body>
<form action="second.html" method="get">
<label for="email">请输入邮箱：</label>
<input type="email" id="email" name="user_email" required>
<button type="submit">提交到下一页</button>
</form>
</body>
</html>
第二个页面（接收页）
通过JavaScript解析URL中的查询参数，获取传递过来的邮箱值：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>接收邮箱页面</title>
</head>
<body>
<p id="show_email"></p>
<script>
// 获取URL中的查询参数部分
const queryString = window.location.search;
// 解析查询参数
const urlParams = new URLSearchParams(queryString);
// 获取名为user_email的参数值
const email = urlParams.get('user_email');
if (email) {
document.getElementById('show_email').textContent = '您输入的邮箱是：' + email;
} else {
document.getElementById('show_email').textContent = '未获取到邮箱信息';
}
</script>
</body>
</html>
二、使用localStorage传递
localStorage是浏览器提供的本地存储机制，存储的数据没有过期时间，适合需要长期保存或在多个页面间共享的数据，不会像URL参数那样暴露在地址栏中。
第一个页面（输入页）
在表单提交时，将输入的值存入localStorage，再跳转到第二个页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>输入邮箱页面</title>
</head>
<body>
<label for="email">请输入邮箱：</label>
<input type="email" id="email" required>
<button onclick="saveAndJump()">提交到下一页</button>
<script>
function saveAndJump() {
const emailInput = document.getElementById('email');
const emailValue = emailInput.value.trim();
if (!emailValue) {
alert('请输入邮箱');
return;
}
// 将邮箱存入localStorage，键名为user_email
localStorage.setItem('user_email', emailValue);
// 跳转到第二个页面
window.location.href = 'second.html';
}
</script>
</body>
</html>
第二个页面（接收页）
从localStorage中读取存储的邮箱值，使用完后可以选择是否清除存储的数据：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>接收邮箱页面</title>
</head>
<body>
<p id="show_email"></p>
<script>
// 从localStorage中读取邮箱值
const email = localStorage.getItem('user_email');
if (email) {
document.getElementById('show_email').textContent = '您输入的邮箱是：' + email;
// 如果不需要长期保存，可以在读取后清除
// localStorage.removeItem('user_email');
} else {
document.getElementById('show_email').textContent = '未获取到邮箱信息';
}
</script>
</body>
</html>
三、使用sessionStorage传递
sessionStorage和localStorage的用法类似，但是存储的数据只在当前浏览器会话期间有效，关闭标签页后数据会自动清除，适合临时传递数据的场景。
第一个页面（输入页）
和localStorage的区别仅在于存储的API调用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>输入邮箱页面</title>
</head>
<body>
<label for="email">请输入邮箱：</label>
<input type="email" id="email" required>
<button onclick="saveAndJump()">提交到下一页</button>
<script>
function saveAndJump() {
const emailInput = document.getElementById('email');
const emailValue = emailInput.value.trim();
if (!emailValue) {
alert('请输入邮箱');
return;
}
// 使用sessionStorage存储，会话结束后自动清除
sessionStorage.setItem('user_email', emailValue);
window.location.href = 'second.html';
}
</script>
</body>
</html>
第二个页面（接收页）
读取方式和localStorage一致，只是获取数据使用sessionStorage的API：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>接收邮箱页面</title>
</head>
<body>
<p id="show_email"></p>
<script>
const email = sessionStorage.getItem('user_email');
if (email) {
document.getElementById('show_email').textContent = '您输入的邮箱是：' + email;
// 读取后可以手动清除
sessionStorage.removeItem('user_email');
} else {
document.getElementById('show_email').textContent = '未获取到邮箱信息';
}
</script>
</body>
</html>
四、不同方式的对比
下面是三种方式的特性对比，方便开发者根据场景选择：
| 传递方式 | 数据有效期 | 数据可见性 | 适用场景 |
|---|---|---|---|
| URL参数 | 仅当前请求有效 | 暴露在地址栏 | 非敏感、小型数据临时传递 |
| localStorage | 永久保存（除非手动清除） | 仅本地存储，不暴露 | 需要长期共享的非敏感数据 |
| sessionStorage | 当前会话有效，关闭标签页清除 | 仅本地存储，不暴露 | 临时传递、会话内的共享数据 |
注意事项
- 如果使用URL参数传递，需要注意特殊字符的编码，比如邮箱中的@符号会被自动编码，解析时不需要额外处理，URLSearchParams会自动解码。
- 本地存储（localStorage、sessionStorage）仅能存储字符串类型的数据，如果传递复杂数据需要先做JSON序列化。
- 敏感数据不建议使用上述前端传递方式，因为这些数据都存储在客户端，容易被用户篡改或获取，敏感数据应该通过后端接口传递。
HTML表单传值localStorageURL参数sessionStorage修改时间：2026-07-11 01:09:16