JS 更新查询字符串而不刷新 - Javascript

在开发中，我们经常需要根据某些条件更新URL的查询字符串，以便在不刷新页面的情况下改变页面的状态。下面将介绍如何使用JavaScript更新查询字符串而不刷新页面。

获取当前URL的查询字符串

我们可以使用window.location.search属性来获取当前页面的查询字符串。该属性返回一个以问号开头的字符串，其中包含所有的查询参数。

const queryString = window.location.search;
console.log(queryString); // ?page=1&size=10

解析查询字符串

通常，我们需要将查询字符串解析为一个对象，以便更方便地访问其中的参数。可以使用 URLSearchParams 类来解析查询字符串。

const searchParams = new URLSearchParams(queryString);
console.log(searchParams.get('page')); // 1
console.log(searchParams.get('size')); // 10

更新查询参数

一旦我们将查询参数解析为一个对象，我们就可以通过添加、删除或更新键值对来更新查询参数。

添加参数

searchParams.append('color', 'red');

更新参数

searchParams.set('size', '20');

删除参数

searchParams.delete('page');

生成新的URL

一旦我们完成了对查询参数的修改，我们需要使用search属性将其设置回URL对象中。

const newUrl = window.location.href.split('?')[0] + '?' + searchParams.toString();
console.log(newUrl);

这里，我们将当前URL中的查询字符串从URL中删除，然后将更新后的查询字符串附加到URL中。

完整代码

下面的代码片段演示了如何使用JavaScript更新查询字符串而不刷新页面。

// 获取当前URL的查询字符串
const queryString = window.location.search;

// 解析查询字符串
const searchParams = new URLSearchParams(queryString);

// 添加，更新，删除参数
searchParams.append('color', 'red');
searchParams.set('size', '20');
searchParams.delete('page');

// 生成新的URL
const newUrl = window.location.href.split('?')[0] + '?' + searchParams.toString();
console.log(newUrl);

总结

使用以上方法可以方便地在JavaScript中更新查询字符串，而不需要刷新整个页面。这对于实现动态过滤、排序、分页等功能非常有用。