Signup/Sign In

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.

Properties Description
length specifies the number of elements contained in the object
scrollRestoration allows web applications to explicitly set default scroll restoration behavior on history navigation
state represents the state at the top of the history stack

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.

Methods Description
back() specifies a method that loads the previous URL from the history list.
forward() specifies a method that loads the next URL from the history list.
go() specifies a method that loads a specific URL from the history list.
pushState() used to push the given data onto the session history stack with the specified title
replaceState() used to update the most recent entry on the history stack to the specified data, title, and, if provided, URL

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.



About the author:
I like writing content about C/C++, DBMS, Java, Docker, general How-tos, Linux, PHP, Java, Go lang, Cloud, and Web development. I have 10 years of diverse experience in software development. Founder @ Studytonight