How To Update URL Parameters Without Refreshing The Browser

I'm building a project where the user will change the state of the website and we want that to be reflected in the URL, so they can share it with others and everyone can easily see which combination of elements they chose.

How to update URL parameters using JavaScript without refreshing the browser: Use window.history.replaceState() along with the current URL and whatever parameters you want to add.

Here's the basic code to make it work:

const currentURL = window.location.href;
$("#changer").click(function (e) {
  e.preventDefault();
  window.history.replaceState("", "", currentURL + "?v=1");
}

I've put currentURL into a const so that it won't change, allowing me to update the parameters. If you put it as a var inside the click function, you'll end up adding ?v=1 to the end of what you have there. If the user clicks twice, the url would be https://example.com/test/?v=1?v=1, but we want to change the value of v.

This is the simplest implementation of the code. When the user clicks on the link with the id "changer", it prevents the link registering, then updates the URL.

If the url was https://example.com/test/, it will update to
https://example.com/test/?v=1

You can then use whatever methods you like to change the parameters.

You can read more about replaceState(), but essentially we're pushing a URL into the top of the browser's history list.

The beauty of this implementation over something like pushState() is that the back button will go through all the versions they looked at.

If you only want to keep one version and replace the page they initially came to, just replace replaceState in the code with pushState and keep everything else the same.

The first two parts of replaceState() are the State Object and the Title. Most browsers don't use the Title and I don't see a reason to pass the State Object for what I was trying to do. You can either set them to "" or to null.

The last part of replaceState() is whatever you want the new URL to display as. Because this doesn't refresh the browser, you're only simulating a new URL.

You can't use replaceState() to change the domain in the browser, but you can use it to change the page structure.

If you use this to change the page structure, remember that it's not refreshing the browser, so if someone hits the back button or refreshes the page, make sure you're showing them what they expect.

How do URL parameters work?

If you're not familiar with parameters, they're built on top of the normal URL structure.

If we take https://example.com/test/?v=1 as an example, the page is
https://example.com/test/

The question mark tells the browser that everything after that point is a parameter.

In our example, we have a parameter of v with a value of 1.

If you refreshed the browser, you could pull those values into PHP by using $_GET.

If you wanted to add additional parameters, connect them with an ampersand & so it would become https://example.com/test/?v=1&h=24.

If you're passing anything more complicated than basic letters and numbers, you should encode the URL first. To do so, change the click function above to something like this:

$("#changer").click(function (e) {
  e.preventDefault();
  var newURL = currentURL + "?v=whatever you want";
  window.history.replaceState("", "", encodeURIComponent(newURL));
}

To reverse the encoding, use decodeURIComponent(url) where url is the encoded URL you're pulling in.