正文：
在Web开发中，页面间的数据传递是常见需求。URL查询参数（Query Parameters）作为轻量级解决方案，无需后端介入即可实现基础数据共享。今天我们将深入探讨如何通过?key=value这种经典格式完成跨页面通信。

一、参数传递基础原理
当用户在浏览器地址栏输入page2.html?articleId=123&theme=dark时，问号后的键值对会自动成为页面环境的一部分。这种设计源自HTTP协议规范，每个参数以&分隔，特殊字符需用encodeURIComponent()转义：

html <a href="detail.html?id=42&category=books">查看详情</a>

二、JavaScript解析实战
在目标页面中，通过URLSearchParamsAPI可轻松提取参数。以下是现代浏览器的标准解析方式：

javascript // 在detail.html页面执行 const urlParams = new URLSearchParams(window.location.search); const articleId = urlParams.get('id'); // 返回"42" const category = urlParams.get('category'); // 返回"books"

对于兼容旧浏览器的场景，可采用传统字符串解析方案：
javascript function getQueryParam(name) { const reg = new RegExp(`[?&]${name}=([^&]*)`); const match = window.location.search.match(reg); return match ? decodeURIComponent(match[1]) : null; }

三、动态参数应用场景
1. 状态持久化
保存用户选择的主题偏好：
javascript // 切换主题时更新URL function setTheme(themeName) { const url = new URL(window.location); url.searchParams.set('theme', themeName); window.history.replaceState(null, '', url); }

1. 分页控制
   在列表页实现无刷新分页：html
   下一页

四、安全边界与限制
1. 长度限制
多数浏览器支持2000字符左右，复杂数据建议使用sessionStorage

1. 敏感信息警示
   绝对不要在URL中传递密码、身份令牌等敏感数据：
   javascript // 危险示例！参数会暴露在浏览器历史记录中 window.location.href = `dashboard.html?token=${userToken}`;

2. 数据类型转换
   从URL获取的参数始终是字符串类型，数字需显式转换：
   javascript const page = parseInt(urlParams.get('page')) || 1;

五、进阶技巧
结合URL参数与Web Storage可实现更复杂状态管理：javascript
// 页面加载时同步参数与本地存储
document.addEventListener('DOMContentLoaded', () => {
const urlParams = new URLSearchParams(location.search);

if(urlParams.has('filter')) {
localStorage.setItem('userFilter', urlParams.get('filter'));
} else {
const savedFilter = localStorage.getItem('userFilter');
if(savedFilter) {
const url = new URL(location);
url.searchParams.set('filter', savedFilter);
history.replaceState(null, '', url);
}
}
});

六、实际开发陷阱
1. 编码一致性
参数值包含=或&时必须编码：
javascript
// 错误示例
const search = 'vue&react';
location.href = results?query=${search}; // 解析会出错

// 正确做法
location.href = results?query=${encodeURIComponent(search)};

1. 框架集成
   Vue路由器的参数接收方式：
   javascript // 在组件内获取 export default { mounted() { console.log(this.$route.query.id); } }

这种看似简单的技术背后，蕴含着Web基础架构的设计智慧。通过合理运用URL参数，我们不仅能实现基础数据传递，更能创造出符合用户预期的浏览历史记录，提升用户体验的连贯性。