JavaScript Window History

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

The History Object

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

Since Window is a global object and it is at the top of the scope chain, so properties of the Window object i.e. window.history can be accessed without window. prefix, for example window.history.length can be written as history.length.

The following section will show you how to get the information of user's browsing history. However, for security reasons scripts are not allowed to access the stored URLs.

Getting the Number of Pages Visited

The window.history.length property can be used to get the number of pages in the session history of the browser for the current window. It also includes the currently loaded page.

You can use this property to find out how many pages a user has visited during the current browser session, as demonstrated in the following example:

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

Going Back to the Previous Page

You can use the back() method of the History object i.e. history.back() to go back to the previous page in session history. It is same as clicking the browser's back button.

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

If your browser back button is active then clicking this Go Back link takes you one step back.

Going Forward to the Next Page

You can use the forward() method of the History object i.e. history.forward() to go forward to the next page in session history. It is same as clicking the browser's forward button.

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

If your browser forward button is active then clicking this Go Forward link takes you one step forward.

Going to a Specific Page

You can also load specific page from the session history using the go() method of the History object i.e. history.go(). This method takes an integer as a parameter. A negative integer moves backward in the history, and a positive integer moves forward in the history.

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

Is this website helpful to you? Please give us a like, or share your feedback to help us improve. Connect with us on Facebook and Twitter for the latest updates.