本文介绍如何在前端安全、可靠地保留并更新 url 中的 get 参数，避免手动拼接导致参数丢失或编码错误，推荐使用原生 `url` 和 `urlsearchparams` api 实现健壮的参数管理。
在 Web 开发中，频繁通过链接或按钮跳转并携带查询参数（如 ?page=page1&pg=2&type=fa&emp=1001）是常见需求。但像原始代码中直接用 PHP 模板插入 <?=$_GET['pg']?> 的方式存在明显风险：当某些参数未在当前请求中存在时（例如首次访问无 pg），PHP 会输出空值甚至触发警告，最终生成不合法的 URL（如 /dashboard.php?page=page1&pg=&type=fa&emp=），导致后端逻辑异常或路由失效。
更严重的是，硬编码拼接不仅难以维护，还极易忽略 URL 编码问题——例如员工姓名含空格或特殊字符时，未经 encodeURIComponent() 处理将破坏 URL 结构。
Knowledge Graph - Csv Graph Loader Generator
下载
从 CSV 数据集生成图数据库加载器和三元组映射。将表格 CSV 数据转换为图数据库可直接使用的节点、边和三元组。
现代浏览器提供了标准化、安全的解决方案：URL 和 URLSearchParams 接口。它们能自动解析、修改并序列化查询参数，天然支持 UTF-8 编码与键值增删改操作，无需手动拼接或转义。
✅ 推荐实践：构建带参数的新跳转链接
// 获取当前页面完整 URL，并提取查询参数
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
// 安全更新参数（自动编码值）
params.set('page', 'page1');
params.set('type', 'fa');
params.set('pg', $(this).val()); // 来自表单输入
params.set('emp', $(this).data('emp')); // 来自 data 属性
// 构造目标路径（保持协议、域名、路径不变，仅替换查询参数）
url.pathname = '/forms/leaver/dashboard.php';
url.search = params.toString();
// 执行跳转
window.location.href = url.toString();✅ 更简洁场景：仅更新参数并刷新当前页（无需跳转到新路径）
const params = new URLSearchParams(window.location.search);
params.set('pg', '5'); // 修改 pg 值
params.delete('temp_flag'); // 移除临时参数
params.append('t', Date.now()); // 追加时间戳（用于强制刷新缓存）
// 直接赋值给 location.search，浏览器自动触发重载
window.location.search = params;⚠️ 注意事项
- 兼容性：URL 和 URLSearchParams 已被所有现代浏览器（Chrome 49+、Firefox 44+、Edge 17+、Safari 10.1+）原生支持；若需支持 IE，可引入 url-polyfill。
- 安全性：URLSearchParams.set() 会自动对值进行 encodeURIComponent()，无需手动编码；但传入的键名也应确保为合法字符串（避免注入风险）。
- 空值处理：.set(key, '') 会保留空值参数；如需彻底移除某参数，请使用 .delete(key)。
- 批量同步：可先用 Object.entries({page:'page1', type:'fa'}) 转换对象，再循环调用 .set()，便于从 JSON 配置动态生成参数。
✅ 总结
告别脆弱的手动字符串拼接。使用 URLSearchParams 管理查询参数，不仅能杜绝因缺失变量或特殊字符引发的 URL 错误，还能显著提升代码可读性与可维护性。结合 URL 对象统一操作路径与参数，让页面导航逻辑清晰、健壮、符合 Web 标准。
