JS 设置查询参数而不重新加载 - Javascript

在网页应用程序中，我们通常需要使用查询参数来获取 URL 上面的信息。但是，如果我们需要在不重新加载页面的情况下更新查询参数，该怎么实现呢？本文将向您介绍如何使用 JavaScript 在不重新加载页面的情况下设置查询参数。

使用 URLSearchParams 对象

在 JavaScript 中，我们可以使用 URLSearchParams 对象来操作 URL 的查询参数。该对象提供了许多方法，可以让我们方便地添加、删除、修改和获取查询参数。

获取查询参数

要获取当前 URL 的查询参数，我们可以使用以下代码：

const params = new URLSearchParams(window.location.search);

这里，我们先创建了一个 URLSearchParams 对象，然后将当前 URL 的搜索参数传递给该对象的构造函数。

现在，我们可以使用 URLSearchParams 对象的 get() 方法来获取查询参数：

const query = params.get('query');

这里，我们传递了一个字符串参数，表示我们要获取的查询参数的名称。如果该参数不存在，get() 方法将返回 null。

设置查询参数

要设置查询参数，我们可以使用 URLSearchParams 对象的 set() 方法：

params.set('query', 'new value');

这里，我们传递了两个字符串参数，第一个参数表示要设置的查询参数的名称，第二个参数表示要设置的值。如果该参数不存在，set() 方法将创建一个新的查询参数。

删除查询参数

要删除查询参数，我们可以使用 URLSearchParams 对象的 delete() 方法：

params.delete('query');

这里，我们传递了一个字符串参数，表示要删除的查询参数的名称。如果该参数不存在，delete() 方法将不做任何操作。

将 URLSearchParams 对象应用于 URL

现在，我们已经学会了如何使用 URLSearchParams 对象来操作查询参数。但是，如果我们要将其应用于实际的 URL 上面，应该怎么办呢？

在这种情况下，我们可以使用 window.location 对象的 search 属性来设置 URL 的查询参数。例如：

window.location.search = params.toString();

这里，我们使用了 URLSearchParams 对象的 toString() 方法，将其转换为 URL 编码字符串，并将其设置为 window.location.search 的值。这样，我们就可以在不重新加载页面的情况下更新 URL 的查询参数了。

总结

在本文中，我们学习了如何使用 JavaScript 和 URLSearchParams 对象来操作 URL 的查询参数。我们可以使用 get() 方法获取查询参数的值，使用 set() 方法设置查询参数的值，使用 delete() 方法删除查询参数，还可以通过 window.location.search 属性将 URLSearchParams 对象应用于实际的 URL 上面。这些技术可以帮助我们实现更加优雅的网页应用程序。