JavaScript History Object

JavaScript History is a built-in Interface (object type) which is used to access the browser window session history. It contains the list of URLs visted by a user in a particular browser window, tab or frame, represented by the window object.

The history object is a property of the JavaScript window object, and can be accessed through the window.history property, and is used to access the session history for that window object.

It provides useful methods and properties that let us navigate back and forth through the window's session history.

Let's take an example to see how this works to understand it better.

JavaScript History Object Example

The History object's back() method is used to go back to the previous URL accessed in the browser window, in the history list.

It is same as clicking the "Back button" in your browser.

<button onclick="goBack()">Go Back</button>

<script>
	function goback(){
	    window.history.back();
	}
</script>

Similarly, we can use the history object's forward() method to load the next URL in the history list. If next URL is not present, it does nothing.

It is same as clicking the "Forward button" in your browser.

<button onclick="goforward()">Go Forward</button>

<script>
	function goforward(){
	    window.history.forward();
	}
</script>

Apart from the back() and forward(), JavaScript history object provides more methods like go() which can be used to jump to any specific URL present in the history object.

To move to any specific page, we can use the go() method, it takes an integer argument that works as an index value for history URL list. See the below example:

<script>
    // move to one page backward
	window.history.go(-1);

    // move to two page backward
    window.history.go(-2);

    // move to one page forward
    window.history.go(1);

    // move to two page forward
    window.history.go(2);
</script>

We can also use the go() method of history object to refresh the current page. In the example below, we have called the go() method two times and it works the same in the both scenario. We can call it anytime when we want to refresh/reload the current page.

<script>
// Refresh the page
        window.history.go(0);

        window.history.go();

</script>

JavaScript History Object Property

Following are the properties of the History object. The length property is used the most.

Let's take an example to get number of pages visited by a user in a browser window. We will use the length property that contains information for the visited pages. See the below example:

JavaScript History Object Methods

JavaScript History object methods refer to the functions created inside the history object. These methods specify the actions related to the URLs visited in the Browser window's current session.

We have explained each method with examples in the beginning of this tutorial itself.

In the next tutorial we will learn about the Navigator browser object.