How to install querystring using javascript

Question

Is there a way to set querystring values ​​using javascript?

My page has a list of filters that, when clicked, will change the results pane on the page on the right.

I am trying to update the querystring values ​​of the URL, so if the user leaves the page, then presses the back buttons, they return to the last set of filter selection.

For instance:
Landing: foo.html
Press 1: foo.html? Facets = bar
Press 2: foo.html? Facets = bar | baz
Press 3: foo.html? Facets = bar | baz | zap

Is it possible?

Answer 1

You can use Javascript to change the hash (# hash of the URL), but changing the query string means you need to reload the page. So no, what you want to do is not possible in this way.

An alternative is to use Javascript to change the hash, and then check the hash on the page load to dynamically change the results. You are looking for something like jQuery Address .

Answer 2

Maybe, but it will refresh the page.

document.location = "?facets=bar"; 

If you do not need browser support, you can use HTML5 history.pushState .

Answer 3

 const params = new URLSearchParams(location.search); params.set('test', 123); window.history.replaceState({}, '', '${location.pathname}?${params}');