How to modify a URL without reloading the page with vanilla JavaScript

Over the last few days, we learned about the URL and URLSearchParams APIs. Today, we’re going to put them together with the History API to modify a URL without reloading the page.

Let’s dig in!

An example URL

Let’s imagine that we have a page with some products. We also have an affiliate program, where people can send people to that page using a URL that contains a query string parameter with their unique referrer ID.

https://my-super-awesome-store.com?ref=GOMAKETHINGS

If someone visits after being referred, then buys something, the person who referred them gets a percentage of the sale.

For this to work, we need to get the value of that ref query string and save it to a cookie. We might also want to remove the value from the actual displayed URL afterwards.

Let’s look at how to do that.

Getting the query string value

First, we’ll use the new URL() constructor to create a new URL object from the window.location.href: the current URL in the browser.

// Create a new URL object
let url = new URL(window.location.href);

Then, we’ll use the URLSearchParams.get() method to check if there’s a ref query string parameter, and save it to a variable.

// Create a new URL object
let url = new URL(window.location.href);

// Get the referrer, if there is one
let ref = url.searchParams.get('ref');

If there is a value for the ref query string, we want to save it to a cookie.

In our case, we’ll have it expire about 28 days, or four weeks.

// Create a new URL object
let url = new URL(window.location.href);

// Get the referrer, if there is one
let ref = url.searchParams.get('ref');

// If there's a referrer, store their ID as a cookie
if (ref) {
	document.cookie = `affiliate_id=${ref}; path=/; max-age=${60 * 60 * 24 * 28};`;
}

Now, our checkout server can access the affiliate_id cookie and give the person who referred our products credit.

Updating the URL in the browser

You might also want to remove that query string from the displayed URL after saving it.

To do that, we’ll first use the URLSearchParams.delete() method to remove it from the URL.

// Create a new URL object
let url = new URL(window.location.href);

// Get the referrer, if there is one
let ref = url.searchParams.get('ref');

// If there's a referrer...
if (ref) {

	// store their ID as a cookie
	document.cookie = `affiliate_id=${ref}; path=/; max-age=${60 * 60 * 24 * 28};`;

	// Remove the query string parameter from the URL
	url.searchParams.delete('ref');

}

Then, we can use the History API and history.replaceState() method to update the URL in the browser.

// Create a new URL object
let url = new URL(window.location.href);

// Get the referrer, if there is one
let ref = url.searchParams.get('ref');

// If there's a referrer...
if (ref) {

	// store their ID as a cookie
	document.cookie = `affiliate_id=${ref}; path=/; max-age=${60 * 60 * 24 * 28};`;

	// Remove the query string parameter from the URL
	url.searchParams.delete('ref');
	history.replaceState(history.state, '', url.href);

}

Now, when someone visits from a referrer link, the referrer’s ID will be saved as a cookie and the displayed URL will be updated so it’s not visible to visitors.