16

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?

rsturim
  • 6,756
  • 15
  • 47
  • 59
  • 1
    Might be better achieved using a filter values cookie? – Dan Apr 05 '11 at 01:37
  • You might take a look at [Backbone](http://backbonejs.org/), especially it's [Backbone.Router class](http://backbonejs.org/#Router). – acme Apr 12 '12 at 07:46

3 Answers3

24

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}`);
Zeke Lu
  • 6,349
  • 1
  • 17
  • 23
Dryden Williams
  • 1,175
  • 14
  • 22
9

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.

Peter Olson
  • 139,199
  • 49
  • 202
  • 242
  • 3
    BTW, now in 2016, [almost all browsers](http://caniuse.com/#feat=history) support `history.pushState`. – Garrett Aug 18 '16 at 03:35
  • 5
    If you don't want to create a new history entry, use `history.replaceState` instead of `history.pushState`. (more [here](http://stackoverflow.com/questions/17507091/replacestate-vs-pushstate)) – Garrett Aug 18 '16 at 03:36
4

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.

Kelly
  • 40,173
  • 4
  • 42
  • 51
  • 2
    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. – dave Jun 01 '20 at 15:27