urlSearchParams 未更新 url

Question

我正在尝试将搜索和页面添加到我的网址，以便在页面上进行搜索和分页。

 const urlParams = new URLSearchParams(window.location.search);
if(!urlParams.has('search'){
   urlParams.append('search', question);
}
if(!urlParams.has('page'){
   urlParams.append('page', pageIndex);
}

这似乎对实际网址没有任何作用。 但是当我调用 urlParams.toString() 时 然后我可以看到它们已被添加，但它们不在浏览器中的实际网址中。

我使用的是Chrome 107，所以它应该支持它。 我是不是错过了什么？

到目前为止，文档对我没有帮助。

Answer 1

当然，它对实际 URL 没有任何作用，您正在创建一个 URLParameters 对象并更新它。你缺少的是：

window.location.search = urlParams.toString()

它将更改浏览器 URL 中的查询字符串并重新加载页面。

如果您对重新加载页面不感兴趣，您可以使用

history

DOM对象

let url = new URL(window.location.href)
if(!(url.searchParams.has('search'))){
   url.searchParams.append('search', question)
}
if(!(url.searchParams.has('page'))){
   url.searchParams.append('page', pageIndex)
}
history.pushState({}, '', url.href)

最后，如果你想更新

page

和

search

参数，你可以使用

url.searchParams.set()

方法，例如：

url.searchParams.set('page', pageIndex);

如果参数不存在，它将追加该参数，如果存在，它将更新它，而不抛出异常。

Answer 2

你可以试试这个方法：

首先，检索当前的

path

。然后，将

urlParams

附加到检索到的路径并使用

history.pushState()

设置新 URL。

const question = "the question";
const pageIndex = 3;

const urlParams = new URLSearchParams(window.location.search);

if (! urlParams.has('search')) {
   urlParams.append('search', question);
}

if (! urlParams.has('page')) {
   urlParams.append('page', pageIndex);
}

const path = window.location.href.split('?')[0];
const newURL = `${path}?${urlParams}`;

history.pushState({}, '', newURL);

来源：

• MDN - URLSearchParams
• MDN - History.pushState()
• 获取不带查询字符串的 URL