Почему не отображаются параметры URL?

Question

[Prome]

Я делаю фильтр интернет магазина. Допустим пользователь выбирает "показать только мужской товар" , я хочу чтобы в url текущей страницы добавился параметр по типу ?pol = man.
проблема в том, что при нажатии на этот div, в url-страницы параметр почему-то не добавляется. в console.log(URL(window.location.href)) видно что параметр добавляется, но в самом url сайта ничего не отображается, почему?

document.querySelector('#div').addEventListener('click',function(){
let url= new URL(window.location.href);
url.searchParams.set('pol','man');
});

Comments

[Сергей Соколов]

полученный объект let url = ... никак не связан с адресной строкой браузера. Это просто новый объект.

Хочется, чтобы при этом браузер перезагрузил страницу, или остался на прежней, хоть URL и поменялся?

[Prome]

Сергей Соколов, Чтобы остался на прежней

[Lynn «Кофеман»]

Prome, гугли History api

[Сергей Соколов]

Prome, History API – см. пример по ссылке

Answer 1

[Сергей Соколов]

Метод pushState() браузерного History API:

const url = new URL(window.location);
url.searchParams.set('qna', 'habr');
window.history.pushState({}, '', url);
// в адресной строке теперь ?qna=habr

Comments

[Prome]

Спасибо!