在Web开发里，经常有人问HTML怎么传参。严格来说，HTML只是用来描述页面结构的标记语言，它自己不能主动把数据传给另一个页面。我们平时说的HTML传参，其实是借助浏览器机制、表单行为以及JavaScript来完成的。下面介绍几种在页面之间或前后端之间传递参数的实用方式。
一、通过URL查询字符串传参
这是最常见也最直观的方式。在页面跳转时，把参数拼在地址后面，以问号开头，多个参数用&连接。目标页面再用脚本解析这些参数。它适合传递少量、非敏感的数据，比如列表筛选条件、文章ID等。
这种方式的优点是实现简单、可收藏、可分享，刷新后参数还在。缺点是参数暴露在地址栏，不适合密码等敏感信息，且浏览器对URL长度有限制。下面是一段从地址中读取参数的示例：
// 假设当前地址为 https://ipipp.com/list.html?category=book&page=2
const params = new URLSearchParams(window.location.search);
const category = params.get('category'); // 得到 book
const page = params.get('page'); // 得到 2
console.log('分类：' + category + '，页码：' + page);
如果需要从A页面跳转到B页面并带上参数，可以直接修改location.href：
// A页面点击按钮跳转到B页面并传参
function goToDetail(id) {
window.location.href = 'https://ipipp.com/detail.html? id=' + encodeURIComponent(id);
}
二、使用form表单提交传参
HTML里的<form>标签天然支持参数传递。通过action指定接收地址，method指定get或post。get会把参数放到URL里，post则放在请求体中。表单适合让用户输入内容后提交，比如登录、搜索。
get方式写法简单，但同样会暴露数据且有长度限制；post能把数据隐藏在请求体，更适合敏感或较大的内容。下面是一段用post方式提交用户名的代码：
<form action="https://ipipp.com/login" method="post"> <label>用户名：</label> <input type="text" name="username" /> <button type="submit">提交</button> </form>
在服务端，就可以根据name属性拿到对应的值。如果只是在同站多页面之间传，也可以把form的action指向另一个HTML，再用脚本读取。不过纯静态页接收post数据不太方便，通常配合后端或前端存储使用。
三、利用Web Storage传参
localStorage和sessionStorage是浏览器提供的键值存储。它们可以在不同页面之间共享数据，不必写在地址里。sessionStorage只在当前标签页有效，关闭即清；localStorage持久保存，直到手动删除。
这种方式适合传递较复杂或临时的状态，比如购物车数据、表单草稿。下面演示在一个页面存、另一个页面取：
// 页面A保存数据
sessionStorage.setItem('token', 'abc123');
localStorage.setItem('theme', 'dark');
// 页面B读取数据
const token = sessionStorage.getItem('token');
const theme = localStorage.getItem('theme');
console.log(token, theme);
要注意，存储API遵循同源策略，且不能存敏感凭证太久。另外，用户在多个标签页操作时，localStorage可能造成状态不同步，需要监听storage事件来处理。
四、通过window.open与opener传参
用JavaScript打开新窗口时，可以通过window.open返回的对象直接调用子页面函数，或借助opener让子页回传数据。这种方法适合弹窗选择、文件选取等场景。
下面是一段父页打开子页并接收返回值的示例：
// 父页面
const win = window.open('https://ipipp.com/picker.html');
win.onload = function () {
win.pickCallback = function (value) {
console.log('子页面选中的值：' + value);
};
};
子页面在用户确认后调用父页挂上的函数即可完成传递。这种写法耦合较紧，弹窗被拦截时也会失效，因此更推荐用URL参数或存储配合postMessage来做跨页通信。
五、不同传参方式对比
为了更清楚地选型，我们用一张表列出主要差异：
| 方式 | 是否暴露参数 | 数据量 | 适用场景 |
|---|---|---|---|
| URL查询字符串 | 是 | 小 | 筛选、分享链接 |
| form get | 是 | 较小 | 搜索、简单提交 |
| form post | 否 | 较大 | 登录、敏感数据 |
| Web Storage | 否 | 较大 | 临时状态、草稿 |
实际项目中，经常是几种方式组合。例如列表用URL参数记住筛选条件，详情页用存储暂存用户操作，提交时用form或fetch带参给后端。弄清HTML本身不传参、只是载体，才能少走弯路。
HTMLparameter_passingfrontend修改时间：2026-08-04 13:42:29