Лучший способ изменить параметры URL с помощью js

Question

Я пытаюсь изменить параметры URL, но не могу найти идеальный способ.

Сначала я попробовал с:

window.location.href = window.location.href + '?test';

Проблема в том, что страница перезагружается и она просто добавляется в URL.

Тогда я попробовал с:

window.location.href = String( window.location.href ).replace( "?test", "" );

Это прекрасно работает, часть, которую я хочу заменить, заменяется / удаляется, но страница перезагружается каждый раз...

Тогда я прочитал о:

window.history.pushState( {} , 'test', '?test' );

Но это не работает как-то...

Моя цель состоит в том, чтобы добавлять и заменять / удалять строки URL, когда кнопки нажимались для управления функциями.

Например, URL-адрес: http://www.example.com/?showoverlay&?showhint

Так, например, это показывает наложение и подсказку подсказки, основанную на этих параметрах URL. Когда пользователь закрыл оверлей, часть "showoverlay" должна быть удалена без перезагрузки страницы. Итак, URL-адрес:

http://www.example.com/?showhint

Answer 1

Вы пытались использовать replaceState? Он заменяет историю без перезагрузки страницы и может соответствовать вашему варианту использования.

window.history.replaceState(data, title [, url  ] );

https://developer.mozilla.org/en-US/docs/Web/API/History_API

Если вам нужно сохранить другие части URL-адреса, сохраните его в отдельной переменной и прикрепите обратно в URL-адрес.

Примерно так вы можете получить каждую часть своего URL:

let url = window.location.origin + window.location.pathname + window.location.search

А потом просто добавь его обратно

window.history.replaceState({}, '', url + '&yourNewParameters=value')