当我们需要在浏览器地址栏中添加或者修改查询字符串时，一般的做法是重新加载整个页面。但是，在某些情况下，我们可能希望能够实现在不重新加载页面的情况下修改查询字符串，以提升用户体验。
查询字符串概述
查询字符串（query string）是指 URL 中问号后面的部分，用于传递参数信息。例如，在下面的 URL 中，查询字符串为 ?page=1&size=10：
---------------------------------------
在前端开发中，我们经常需要通过查询字符串来传递数据，例如页面分页、搜索功能等。
修改查询字符串的方法
1. 使用 history.pushState() 或 history.replaceState()
HTML5 新增了history.pushState()和history.replaceState()方法，它们可以修改当前页面的历史记录，并且不会刷新页面。
history.pushState(stateObject, title, url)：将一个URL放入浏览器历史记录栈顶，并更新地址栏显示的URL，同时不刷新页面。history.replaceState(stateObject, title, url)：用新的URL替换当前的历史记录项，并更新地址栏显示的URL，同时不刷新页面。
这两个方法都接受三个参数：
stateObject：一个 JavaScript 对象，可以通过window.history.state获取到该对象。如果不需要可以传 null。title：新的页面标题，一般也传 null。url：新的 URL，必须与当前页面处于同一域名下。
例如，可以使用以下代码修改查询字符串：
--- --- - --- -------------------------- ---------------------------- --- --------------------- --- -----
2. 使用 URLSearchParams API
URLSearchParams 是一个内置于浏览器的 JavaScript API，用于解析和操作 URL 查询参数。它提供了多种对查询参数进行操作的方法，如添加、删除、获取等。通过修改 URLSearchParams 对象，我们可以实现不刷新页面的方式修改查询字符串。
--- --- - --- -------------------------- --- ------------ - --- ---------------------------- ------------------------ --- -- ------------- --- ---- ------ -- ---------- - ------------------------ -- ---- --- ----- --------------------- --- -----
注意事项
- 以上方法仅适用于 HTML5 的新特性，因此不支持 IE9 及以下版本。
- 如果直接在地址栏中手动输入或修改查询字符串，还是会重新加载页面。
- 在使用
history.pushState()或history.replaceState()方法时，如果手动刷新或者按后退按钮回到之前的页面，会发现 URL 发生了变化，但是页面内容并没有刷新。
结语
通过上述两种方式，我们可以轻松地在不重新加载页面的情况下修改查询字符串。这对于提升用户体验和交互性非常有帮助。不过需要注意的是，这种方式只适用于 HTML5 ，而且需要谨慎使用，避免出现意外情况。
完整示例代码：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14506