This content originally appeared on Go Make Things and was authored by Go Make Things
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.
Liked this? Get 15 FREE self-paced JavaScript projects. Each one includes a few short lessons and a template to get you started. Click here to get started.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2023-05-25T14:30:00+00:00) How to modify a URL without reloading the page with vanilla JavaScript. Retrieved from https://www.scien.cx/2023/05/25/how-to-modify-a-url-without-reloading-the-page-with-vanilla-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.