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?

• Dan: Might be better achieved using a filter values cookie?
• acme: You might take a look at Backbone, especially it's Backbone.Router class.

Answer 1

You can use URLSearchParams. Just note that it isn't available for Internet Explorer 11.

// Get current URL parts
const path = window.location.pathname;
const params = new URLSearchParams(window.location.search);
const hash = window.location.hash;
// Update query string values
params.set('numerical', 123);
params.set('string', 'yummy');
params.set('multiple', ['a', 'b', 'c']);
params.set('foreignChar', 'é');
// Encode URL
// numerical=123&string=yummy&multiple=a%2Cb%2Cc&foreignChar=%C3%A9
console.log(params.toString());
// Update URL
window.history.replaceState({}, '', `${path}?${params.toString()}${hash}`);

• Kyle Barron: This is great but you should also include location.hash after params.toString

Answer 2

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.

• Garrett: BTW, now in 2016, almost all browsers support history.pushState.
• Garrett: If you don't want to create a new history entry, use history.replaceState instead of history.pushState. (more here)

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.

• dave: As shown in @Dryden Williams answer, the URL can be changed without reloading the page by using window.history.replaceState() or window.history.pushState(). This did not have full support when the question was originally asked but can be done in all major browsers now.