在HTML多页面应用开发中，经常需要从一个页面跳转到另一个页面时携带参数，比如列表页点击某条数据跳转到详情页，需要把数据ID传递给详情页，此时就需要用JavaScript获取传递过来的参数。常见的传参方式是通过URL的查询参数实现，下面介绍具体的获取方法。
通过URL查询参数传参的基础用法
从一个HTML页面向另一个页面传递参数时，最常见的做法是在跳转链接的URL后面拼接查询参数，格式为?key1=value1&key2=value2，例如第一个页面跳转到第二个页面的链接可以写成如下形式：
<!-- 第一个页面 a.html 的跳转链接 --> <a href="b.html?id=123&name=test">跳转到详情页</a>
使用location.search解析参数
在目标页面中，可以通过window.location.search获取URL中?后面的查询字符串，然后手动解析得到参数值。这种方法是兼容性最好的传统方案，支持所有主流浏览器。
解析location.search的示例代码如下：
// 获取查询字符串，例如 "?id=123&name=test"
const searchStr = window.location.search;
// 去掉开头的?
const paramsStr = searchStr.substring(1);
// 按&分割得到每个参数的键值对
const paramArr = paramsStr.split('&');
const params = {};
// 遍历键值对，存入对象
paramArr.forEach(item => {
const [key, value] = item.split('=');
// 对值进行解码，处理特殊字符
params[key] = decodeURIComponent(value);
});
console.log(params.id); // 输出 123
console.log(params.name); // 输出 test
注意事项
- 如果URL中没有查询参数，
location.search会返回空字符串，此时需要做空值判断避免报错。 - 参数值如果包含中文、空格等特殊字符，传递时需要使用
encodeURIComponent编码，获取时用decodeURIComponent解码，否则会出现乱码或者解析错误。
使用URLSearchParams API获取参数
现代浏览器支持URLSearchParams API，可以更便捷地解析查询参数，不需要手动分割字符串，代码更简洁。该API提供了get、has、getAll等方法操作参数。
使用URLSearchParams获取参数的示例代码如下：
// 直接传入location.search创建URLSearchParams实例
const searchParams = new URLSearchParams(window.location.search);
// 获取单个参数
const id = searchParams.get('id');
const name = searchParams.get('name');
console.log(id); // 输出 123
console.log(name); // 输出 test
// 判断参数是否存在
const hasAge = searchParams.has('age');
console.log(hasAge); // 输出 false
// 获取所有参数键值对
for (const [key, value] of searchParams.entries()) {
console.log(key, value);
}
兼容性说明
URLSearchParams不支持IE浏览器，如果需要兼容IE，建议使用前面介绍的location.search手动解析的方案，或者引入对应的polyfill。
其他传参方式的参数获取
通过hash参数传参
除了查询参数，还可以通过URL的hash部分传参，格式为#key1=value1&key2=value2，获取时通过window.location.hash拿到hash字符串，再去掉开头的#后按照查询参数的解析方式处理即可。
// 跳转链接示例：b.html#id=123&name=test
const hashStr = window.location.hash.substring(1);
const hashParams = new URLSearchParams(hashStr);
console.log(hashParams.get('id')); // 输出 123
通过本地存储传参
如果两个页面在同一个域名下，还可以通过localStorage或者sessionStorage传递参数，第一个页面存储参数，第二个页面读取后删除即可，这种方式适合传递较长的参数，不会暴露在URL中。
// a.html 存储参数
localStorage.setItem('pageParams', JSON.stringify({id: 123, name: 'test'}));
// 跳转到b.html
window.location.href = 'b.html';
// b.html 获取参数
const paramsStr = localStorage.getItem('pageParams');
if (paramsStr) {
const params = JSON.parse(paramsStr);
console.log(params.id); // 输出 123
// 读取后删除，避免数据残留
localStorage.removeItem('pageParams');
}
常见问题解答
问：如果参数值是数组，比如要传递多个id，应该怎么处理？
可以将数组转成逗号分隔的字符串传递，比如?ids=1,2,3，获取后再用split转成数组即可，也可以使用JSON.stringify把数组转成字符串，获取时用JSON.parse解析。
问：获取到的参数值是undefined是什么原因？
通常是参数名拼写错误，或者URL中没有传递该参数，可以先打印window.location.search查看实际的查询字符串，确认参数是否存在。
JavaScriptURL参数获取HTML页面传参location_searchURLSearchParams修改时间：2026-06-27 16:24:31