The JavaScript History API

#webdev #javascript #programming #tutorial

Introduction

The JavaScript History API is a part of the Web API that allows us to interact with the browser's session history. It provides methods and properties to navigate, manipulate and control the history stack, enabling developers to create more dynamic and interactive user experiences without requiring full page reloads.

Key features of the JavaScript History API

history.back()
history.forward()
history.go(n)
history.pushState()
history.replaceState()

The history.back() method

This method moves the browser to the previous page in the session history, equivalent to the browser's back button. This will only work if a previous page exists in the browser's history stack.

Example:

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.back() Method</h2>

<button onclick="history.back()">Go Back</button>

</body>
</html>

Output:

Clicking on the "Go Back" button will take the user to the previous page if it exists in the history stack.

The history.forward() method

This method moves the browser to the next page in the session history, equivalent to the browser's forward button. This will only work if a next page exists in the browser's history stack.

Example:

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.forward Method</h2>

<button onclick="history.forward()">Go Forward</button>

</body>
</html>

Output:

Clicking on the "Go Forward" button will take the user to the next page if it exists in the history stack.

The history.go() method

This method is used to navigate to a specific point in the browser stack. It takes an argument 'n', which specifies the number of the page we want to navigate to through the history stack.

The argument 'n' can accept the following values:

Positive 'n' takes user forward in the stack.
Negative 'n' takes user backward in the stack.
If 'n' has value 0, it reloads the current page.

The history.pushState() method

This method is used to add a new entry in the current session's history stack i.e. the collection of all the pages visited in the current browser tab.

Example:
We will create a button element and assign it a click handler. Inside the handler, we call the pushState() method. This adds a new entry with a different URL than the one of the current page.

// HTML ->
<button>Call pushState()</button>

// JavaScript ->
var button = document.querySelector('button');
button.onClick = function() {
    history.pushState(null, ' ', 'some-page');
}

Output:

Currently, the URL is - https://www.codeguage.com/courses/js/examples/pushstate

When you will click on the button, the URL will change to - https://www.codeguage.com/courses/js/examples/some-page

This confirms that a new entry has been added to the current session's history, also changing the URL in the browser's address bar. You can also see that the browser's back-arrow is also active now in the top-left corner, clicking on which will take you back to -
https://www.codeguage.com/courses/js/examples/pushstate

One extremely important thing to know is that pushState() changes the URL without ever checking whether it even actually exists or not. This is because the purpose of pushState() is not to load a webpage, but rather to just add a new entry to the history.

The history.replaceState() method

This method replaces the current entry in the current session's history stack with a new entry.

Example:
As before, we have a button with a click handler set. But this time, inside the handler, we call replaceState() to replace current history entry with a new one.

// HTML =>
<button>Call replaceState()</button>

// JavaScript =>
var button = document.querySelector('button');

button.onclick = function() {
   history.replaceState(null, '', 'some-page');
}

Output:

The current URL is -
https://www.codeguage.com/courses/js/examples/replacestate

When you click the button, the URL will change to -
https://www.codeguage.com/courses/js/examples/some-page

The browser URL has been replaced, and you can notice that the back-arrow key on the top left corner is NOT active, confirming that a new entry has NOT been added to the history stack, we have just replaced the current entry with a new one.

And that's it! You have successfully learnt about the JavaScript History API, and how to use and incorporate its different utilities in your applications.

Connect with me on LinkedIn :- Linkedin

Do check out my GitHub for amazing projects :- Github

View my Personal Portfolio :- Aryan's Portfolio