使用history.pushState()更新URL中的参数

Question

我正在使用history.pushState在我的页面上进行AJAX调用后将几个参数附加到当前页面URL.现在,在基于用户操作的同一页面上,我想使用相同或更多的参数集再次更新页面URL.所以我的代码看起来像这样:

var pageUrl = window.location.href + "?" + queryString;
window.history.pushState('','',pageUrl);

queryString是我的查询参数列表.

• 例如,我的默认页面网址:http://sample.com/
• 在同一页面上的第一次AJAX调用之后,URL应为:http://sample.com？param1 = foo¶m2 = bar
• 在同一页面上进行第二次AJAX调用后,URL可以是:http://sample.com/？ param1 = foo,foo1¶m2 = bar¶m3 = another_foo

但是使用上面的代码我的params会被params附加到URL,并且在第二次AJAX调用后它们看起来如下所示:

http://sample.com?param1=foom2=barm1=foo,foo1m2=barm3=another_foo

所以params在URL中出现两次,是否有任何方法可以在推送到History之前替换URL中的params或者在javascript(jquery)中实现此目的的任何其他更好的方法？

Answer 1

我想你需要的是删除window.location.href和离开'?' +.

var pageUrl = '?' + queryString;
window.history.pushState('', '', pageUrl);

Answer 2

为了保留 url 的最后一部分并仅使用参数，您可以创建一个新的 URL 对象，如下所示：

// e.g url: sample.com/testpage/test

var url = new URL(window.location);
url.searchParams.set('foo', 'bar');
window.history.pushState({}, '', url);

// outcome: sample.com/testpage/test?foo=bar

// you can remove, just the param part, like so:
url.searchParams.delete('foo');

Answer 3

此功能可能会有所帮助

function updateUrlParameter(param, value) {
    const regExp = new RegExp(param + "(.+?)(&|$)", "g");
    const newUrl = window.location.href.replace(regExp, param + "=" + value + "$2");
    window.history.pushState("", "", newUrl);
}

编辑:以下解决方案更简单,如果参数还不是URL的一部分,它也可以工作.但是,Internet Explorer不支持它(你不说？).

function setQueryStringParameter(name, value) {
    const params = new URLSearchParams(window.location.search);
    params.set(name, value);
    window.history.replaceState({}, "", decodeURIComponent(`${window.location.pathname}?${params}`));
}