更新 URL 参数并创建历史条目 - JavaScript

在 JavaScript 中，我们可以很容易地更新 URL 参数并添加历史条目。这对于需要更新 URL 但不想重新加载页面的应用程序非常有用。例如，一个在线购物应用程序可以使用此方法来更新 URL 参数以显示所选择的过滤器，而不必重新加载页面。

我们可以使用 URLSearchParams 对象来处理 URL 参数。首先，我们需要使用 window.location.search 来获取当前 URL 的查询字符串部分，这是以 ? 开头的部分。我们可以将其传递给 URLSearchParams 构造函数以创建一个 URLSearchParams 对象。

然后，我们可以使用 get() 方法获取特定的参数值，使用 set() 方法更新参数值，并使用 toString() 方法将其转换回查询字符串。最后，我们可以使用 history.pushState() 方法将新 URL 添加到浏览器历史记录中。

下面是一个示例代码片段：

// 获取查询字符串参数
const urlParams = new URLSearchParams(window.location.search);

// 获取特定参数值
const filter = urlParams.get('filter');

// 更新参数值
if (filter === 'all') {
  urlParams.set('filter', 'active');
} else {
  urlParams.set('filter', 'all');
}

// 创建新查询字符串
const newQueryString = urlParams.toString();

// 更新 URL 并创建历史记录
const newUrl = window.location.pathname + '?' + newQueryString;
history.pushState(null, null, newUrl);

使用此代码片段，我们可以轻松地更新 URL 参数并添加历史记录。无需重新加载页面，我们就可以使用新的参数值进行操作。

需要注意的是，当我们使用 history.pushState() 方法添加历史记录时，URL 将被更新，但页面不会重新加载。因此，必须使用其他方法来重新渲染页面或执行所需的操作。