How to set querystring with Javascript

Question 1

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?

Question 2

Might be better achieved using a filter values cookie?

Question 3

You might take a look atBackbone, especially it'sBackbone.Router class.

Question 4

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

// Get current URL partsconst path = window.location.pathname;const params = new URLSearchParams(window.location.search);const hash = window.location.hash;// Update query string valuesparams.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%A9console.log(params.toString());// Update URLwindow.history.replaceState({}, '', `${path}?${params.toString()}${hash}`);

Question 5

This is great but you should also includelocation.hash afterparams.toString

Question 6

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 HTML5history.pushState.

Question 7

BTW, now in 2016,almost all browsers supporthistory.pushState.

Question 8

If you don't want to create a new history entry, usehistory.replaceState instead ofhistory.pushState. (morehere)

Question 9

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 likejQuery Address.

Question 10

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.

Dryden Williams 1,31517 silver badges22 bronze badges · Accepted Answer · 2023-04-20 03:32:18Z

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

// Get current URL partsconst path = window.location.pathname;const params = new URLSearchParams(window.location.search);const hash = window.location.hash;// Update query string valuesparams.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%A9console.log(params.toString());// Update URLwindow.history.replaceState({}, '', `${path}?${params.toString()}${hash}`);

This is great but you should also includelocation.hash afterparams.toString

Movatterモバイル変換

Collectives™ on Stack Overflow

How to set querystring with Javascript

3 Answers3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up orlog in

Post as a guest

Linked

Related

Hot Network Questions

Subscribe to RSS