JS History

In this tutorial, you will learn about the JavaScript window history object.

The History Object

The history property of the Window object is referred to as the History object. It contains a list of all the pages visited in the current frame or window known as the browser session history.

Properties of the Window object (i.e. window.history) can be accessed without the window since a window is a global object and is located at the top of the scope chain. prefix, for instance, the window.history.length can be written as the history.length.

The section below shows how to get the information on a user's browsing history. However, scripts are not allowed to access the stored URLs due to security reasons.

Getting the Number of Pages Visited

To get the number of pages in the session history of the browser for the current window as well as the currently loaded page, the window.history.length property can be used.

Just as demonstrated in the following example, this property can be used to find out how many pages a user has visited during the current browser session.

<script>
function getViews() {
    alert("You've accessed " + history.length + " web pages in this session.");
}
</script>
 
<button type="button" onclick="getViews();">Get Views Count</button>

Try with example
 

Going Back to the Previous Page

To go back to the previous page in the session history, the back() method of the History object i.e. history.back() is suitable for this action. Clicking on the browser's back button also performs the same role.

<script>
function goBack() {
    window.history.back();
}
</script>
 
<button type="button" onclick="goBack();">Go Back</button>

Clicking on the Go Back link will take you one step back only If you have an active browser back button.

Going Forward to the Next Page

The forward() method of the History object which is also known as history.forward() can be used to go forward to the next page in the session history. Clicking on the browser's forward button.Go Forward</button> performs the same role

<script>
function goForward() {
    window.history.forward();
}
</script>
 
<button type="button" onclick="goForward();">Go Forward</button>

Clicking on the Go Forward link takes you one step forward only If you have an active browser forward button.

Going to a Specific Page

A specific page from the session history can be loaded using the go() method of the History object which is also known as history.go(). In this method, an integer is taken as a parameter. A negative integer and a positive integer move backward and forward respectively in the history.// Go forward two pages

window.history.go(-2);  // Go back two pages
window.history.go(-1); // Go back one page
window.history.go(0);  // Reload the current page
window.history.go(1);  // Go forward one page
window.history.go(2);  // Go forward two pages

Tip: The methods back(), forward(), and go() will absolutely do nothing If you attempt accessing the page that doesn’t exist in the window's history.