How to set querystring with Javascript

Question

Is there a way to set the values of a querystring using javascript?

My page has a filter list that when clicked, it will alter the in-page results pane on the right hand side.

I'm trying to update to the querystring values of the url, so if the user leaves the page, then clicks the "back" buttons they'll be return to the last filter selection set.

For example:
Landing: foo.html
Click 1: foo.html?facets=bar
Click 2: foo.html?facets=bar|baz
Click 3: foo.html?facets=bar|baz|zap

Is this possible?

Answer 1

It is possible, but it will refresh the page.

document.location = "?facets=bar";

If you don't care about browser support, you can use the HTML5 history.pushState.

Answer 2

const params = new URLSearchParams(location.search);
params.set('test', 123);
params.set('cheese', 'yummy');

params.toString(); // => test=123&cheese=yummy
window.history.replaceState({}, '', `${location.pathname}?${params.toString()}`);

Answer 3

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

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