history.pushState()更改查询参数值

Question

如果我有一个链接，它是通过函数 history.pushState({}, "", link); 进行更改的，其中我的 link 例如是 page.php?value=1&value2=2，那么是否有一种方法可以仅使用 pushState() 函数更改 value2 而不是更改整个链接？

- Grigor

Answer 1

如果你想在不添加额外历史记录的情况下更改URL，可以尝试使用replaceState。

history.replaceState({value: 1, value2: X}, "title", "page.php");

- devstruck

---

这似乎不是一个答案。将对象作为replaceState的第一个参数传递不会影响URL中的查询值，只有最后一个参数会起作用：在这个例子中，它将完全删除查询。 - Trevor Burnham

OP希望在当前的历史状态中更新（而不是创建新的）一个值。虽然你不能使用pushState来修改状态对象，但这就是replaceState的目的所在。 - devstruck

Answer 2

不行，因为查询字符串是URL的一部分。如果你不需要将这些值传递给服务器，你可以将它们包含在历史状态对象中，然后使用pushState()仅更改状态对象。例如：

history.pushState({value: 1, value2: 2}, "Title", 'page.php');
history.pushState({value: 1, value2: 'new value'}, "Title");

- Chris Pratt

Answer 3

您可以使用这个有用的函数来更改查询字符串参数值：

function updateParam(url, param, value)
{  
    var re = new RegExp(param+"(.+?)(&|$)","g");

    return url.replace(re, param+'='+value)  
}

- ChrisThompson

---

最后一行应该是url.replace(re, param+'='+value+'$2')，对吧？否则就会丢失与号分隔符。 - user657199