替换 window.history.replaceState 中的值而不是添加到它

Question

单击按钮时，我想添加查询参数。问题是，如果我再次按下按钮，它会将值重新添加到 URL。有没有办法让我替换而不是添加？

我的代码：

$('#btn').on('click', function() {
    let my_arr = arr.join('&');
    window.history.replaceState({}, 'Title', `/${window.location.search}&${my_arr}`);
});

如果它添加了我的查询参数，则在第一次点击时：a=1&b=2。

如果我使用新值再次单击该按钮，它会将 a=5&b=2 重新添加到之前的值，使其看起来像：a=1&b=2&a=5&b=2.

有没有办法替换这些值而不是添加这些值？

Answer 1

这里是一个示例，它也保留了现有值，只是覆盖了您指定的值。

$('#btn').on('click', function() {
  const testFallbackValue = "?a=33&b=77&c=234"; // Just for demonstration
  const searchParams = new URLSearchParams(window.location.search || testFallbackValue);
  const myNewValue = {
    a: 1,
    b: 2,
  };
  Object.entries(myNewValue).forEach(([k, v]) => {
    searchParams.set(k, v);
  });
  console.log(searchParams.toString());
  // Uncomment when ready to replace state
  //window.history.replaceState({}, 'Title', `/?${searchParams.toString()}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="btn">Click</button>

如果您不想保留其他现有值，也可以忽略将当前搜索字符串传递给 URLSearchParams 构造函数。

替换 window.history.replaceState 中的值而不是添加到它

Replace values in window.history.replaceState rather than adding to it

javascript

url

jquery

url-parameters

browser-history