How to set querystring with Javascript

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 开发者_JAVA百科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?

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()}`);

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.

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.