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

Posted 2023-02-22

【中文标题】替换 window.history.replaceState 中的值而不是添加到其中

【英文标题】：Replace values in window.history.replaceState rather than adding to it

【发布时间】：2020-09-26 00:01:54

【问题描述】：

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

我的代码：

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

如果它添加了我的查询参数，则在第一次点击时：@9​​87654322@。

如果我再次点击带有新值的按钮，它会将a=5&b=2 重新添加到之前的值中，使其看起来像：a=1&b=2&a=5&b=2。

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

【问题讨论】：

您是否需要支持其他未在您的数组中设置的查询字符串参数？

@Chase，不，我不知道。我只想在每次单击按钮时替换而不是添加到

$window.location.search& 应该是?，然后就可以正常工作了。

【参考方案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 构造函数。