点击<a>标签时设置/更新特定Query String值（避免重复追加）

问题分析 #

• 第一种代码的坑：第一次点击后，a标签的href会被改成带参数的URL，后续点击会在这个已带参数的URL上继续追加，导致参数重复叠加。
• 第二种尝试的问题：刚把href更新为带参数的地址，立刻又改回原始URL，浏览器最终会使用最后修改的原始地址跳转，所以完全无效。

正确方案1：拦截默认行为，手动构造URL跳转 #

这种方式保持a标签的href始终为原始值，每次点击都基于原始URL处理参数，从根源避免重复追加问题。

<a id="my-link" href="http://example.com/">点击跳转</a>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#my-link').on('click', function(e) {
    // 阻止浏览器默认的跳转行为
    e.preventDefault();
    
    // 获取a标签的原始URL
    const originalUrl = this.getAttribute('href');
    const queryKey = 'someKey';
    // 如果someDataObject是对象，先转成字符串再编码，避免出现[object Object]
    const queryValue = encodeURIComponent(JSON.stringify(someDataObject));
    
    // 用URL对象处理查询参数，自动处理添加/替换逻辑
    const urlObj = new URL(originalUrl);
    urlObj.searchParams.set(queryKey, queryValue); // 有该参数就替换，没有就添加
    
    // 手动跳转到构造好的新URL
    window.location.href = urlObj.toString();
});
</script>

正确方案2：基于原始URL安全更新href #

如果不想拦截默认行为，可以提前保存原始URL，每次点击都基于原始URL重新构造带正确参数的href：

<a id="my-link" href="http://example.com/">点击跳转</a>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 提前保存原始URL，避免依赖可能被修改的当前href
const originalUrl = $('#my-link').attr('href');

$('#my-link').on('click', function() {
    const queryKey = 'someKey';
    const queryValue = encodeURIComponent(JSON.stringify(someDataObject));
    
    const urlObj = new URL(originalUrl);
    urlObj.searchParams.set(queryKey, queryValue);
    
    // 更新href为带正确参数的URL
    this.href = urlObj.toString();
});
</script>

关键提示 #

• 用URL对象和searchParams方法处理查询参数是最靠谱的，它会自动处理参数的编码、添加、替换，不用自己手动拼接字符串踩坑。
• 方案1更稳妥，全程基于原始URL操作，不会因为意外修改href出问题；方案2需要提前存好原始URL，确保每次构造都从干净的地址开始。

内容的提问来源于stack exchange，提问作者pileup