替换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(([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>