The HTML5 History API is definitely the way to go for modern websites. It accomplishes the task at hand, while also providing additional functionality. You can use either history.pushState[]
or history.replaceState[]
to modify the URL in the browser, depending on your needs:
The arguments for both methods are the same, allowing you to pass a customized serializable state
object as the first argument, a customized title
[although most browsers will ignore this parameter] and the URL
you want to add/replace in the browser's history. Bear in mind that the History API only allows same-origin URLs, so you cannot navigate to an entirely different website.
Using the Location API
The older Location API is not the best tool for the job. It reloads the page, but still allows you to modify the current URL and might be useful when working with legacy browsers. You can modify the URL, using either Window.location.href
, location.assign[]
or location.replace[]
:
As you can see, all three options will cause a page reload, which can be undesirable. Unlike the History API, you can only set the URL, without any additional arguments. Finally, the Location API doesn't restrict you to same-origin URLs, which can cause security issues if you are not careful.
HTML5 History API allows changing a URL without reloading the page using pushState[]
and replaceState[]
methods. These methods can be accessed on window.history
object in JavaScript. They both modify the history records in the browser but differently.
In this article, I will show you how you can use the history API to update a URL without reloading the page in JavaScript.
How to Change URL Without Page Reload in JavaScript
Modern single-page applications modify the browser's history stack when a user changes the route and displays page content accordingly using JavaScript.
You can also use the pushState[]
and replaceState[]
methods to add hash value to the URL. These methods accept multiple arguments to save states for the route.
Then you can extract the state information from the history object and use it to display appropriate content on the page.
Now, let's see how you can use those methods and how they are different from each other with some examples.
Also Read: How to Open URL Using JavaScript in Same or New Tab/Window
Modify URL Using history.pushState[] Method
When you call the pushState[]
method on
window.history.pushState[{ user: "john" }, "", "/settings"];
0 object, it adds a new entry to the browser history and modifies the URL in the address bar without reloading the page.This method takes 3 arguments:
window.history.pushState[{ user: "john" }, "", "/settings"];
1, window.history.pushState[{ user: "john" }, "", "/settings"];
2, and window.history.pushState[{ user: "john" }, "", "/settings"];
3. window.history.pushState[state, unused, url];
window.history.pushState[{ user: "john" }, "", "/settings"];
window.history.pushState[{ user: "john" }, "", "/settings"];
window.history.pushState[{ user: "john" }, "", "/settings"];
window.history.pushState[{ user: "john" }, "", "/settings"];
window.history.pushState[{ user: "john" }, "", "/settings"];
pushState[]
method. But in order to change the URL, you have to provide its value. You can pass both absolute and relative URLs for this attribute.
Let's see an example to understand how these 3 attributes are used in the pushState[]
method.
window.history.pushState[{ user: "john" }, "", "/settings"];
I am calling the pushState[]
method with 3 arguments. For the
window.history.pushState[{ user: "john" }, "", "/settings"];
1 argument, I am passing an object with the window.history.replaceState[state, unused, url];
3 property. You can add as many object properties as you want.For the unused argument, I am passing an empty string. Because browsers will not use this value.
For the
window.history.pushState[{ user: "john" }, "", "/settings"];
3 argument, I am providing "/settings". When a browser executes this line, it will change the URL to this path.That means, if the current URL is
window.history.replaceState[state, unused, url];
5 in the address bar, it will become window.history.replaceState[state, unused, url];
6 after changing.In this new URL, you will be able to extract the
window.history.replaceState[state, unused, url];
3 state value by using window.history.replaceState[state, unused, url];
8 property.Note: The
3 value must be the same origin as the current URL. If the current origin iswindow.history.pushState[{ user: "john" }, "", "/settings"];
5, you can't passwindow.history.replaceState[state, unused, url];
1 for this attribute. Otherwise, it will throw an error.window.history.replaceState[{ user: "john" }, "", "/about"];
Update URL Using history.replaceState[] Method
The
window.history.replaceState[{ user: "john" }, "", "/about"];
2 is another method available on the history object to update the URL without reloading a page in the browser. This method works similarly to the window.history.replaceState[{ user: "john" }, "", "/about"];
3 method. window.history.replaceState[state, unused, url];
It takes the same 3 arguments. Its function is also the same. This method changes the current URL using the
window.history.pushState[{ user: "john" }, "", "/settings"];
3 attribute value.The difference between pushState[]
and replaceState[]
method is that, as the names suggest, the pushState[]
method pushes or adds new history to the browser. On the other hand, the
window.history.replaceState[{ user: "john" }, "", "/about"];
8 method replaces the current history with the new one. window.history.replaceState[{ user: "john" }, "", "/about"];
If I am currently at
window.history.replaceState[{ user: "john" }, "", "/about"];
9 URL and change the URL to pushState[]
0 using replaceState[]
method, I can't go back to the window.history.replaceState[{ user: "john" }, "", "/about"];
9 URL. Because this method will replace the history of this page with the pushState[]
0 page.But if you do the same thing using the pushState[]
method, you can go back to the
window.history.replaceState[{ user: "john" }, "", "/about"];
9 page by clicking the back button in the browser. Because it doesn't replace the window.history.replaceState[{ user: "john" }, "", "/about"];
9 URL history instead it will add a new entry to the browser history for the pushState[]
0 URL.Also Read: How to Check For Hash [#] Value in a URL Using JavaScript
Which Method Should You Use?
Both methods change the URL in the browser's address bar without reloading the page. As you have seen difference, one method adds a new entry to the browser history and another replaces the current history with the new one.
You should use the pushState[]
method when you want to change the current URL but also want the ability to go back to the previous URL.
On the other hand, you should only use the replaceState[]
method when you want to replace the current URL with the new URL and don't want to go back to the previous page.
Conclusion
I have discussed two methods from History API in this article. Both of these methods are used to update a URL in the browser.
Now you know how to use them and the difference between the pushState[]
and replaceState[]
methods. You can use any of them according to the requirement.