JavaScript - History Object

Window History Object

In JavaScript, the window 'history' object contains information about the browser's session history. It contains the array of visited URLs in the current session.

The 'history' object is a property of the 'window' object. The history property can be accessed with or without referencing its owner object, i.e., window object.

Using the 'history' object's method, you can go to the browser's session's previous, following, or particular URL.

History Object Methods

The window history object provides useful methods that allow us to navigate back and forth in the history list.

Follow the syntax below to use the 'history' object in JavaScript.

window.history.methodName();
OR
history.methodName();

You may use the 'window' object to access the 'history' object.

JavaScript History back() Method

The JavaScript back() method of the history object loads the previous URL in the history list.

Syntax

Follow the syntax below to use the history back() method.

history.back();

Example

In the below code's output, you can click the 'go back' button to go to the previous URL. It works as a back button of the browser.

<html>
<body>
   <p> Click "Go Back" button to load previous URL </p>
   <button onclick="goback()"> Go Back </button>
   <p id = "output"> </p>
   <script>
      function goback() {
         history.back();
         document.getElementById("output").innerHTML +=
		 "You will have gone to previous URL if it exists";
      }
   </script>
</body>
</html>

JavaScript History forward() Method

The forward() method of the history object takes you to the next URL.

Syntax

Follow the syntax below to use the forward() method.

history.forward();

Example

In the below code, click the button to go to the next URL. It works as the forward button of the browser.

<html>
<body>
   <p> Click "Go Forward" button to load next URL</p>    
   <button onclick = "goforward()"> Go Forward </button>
   <p id = "output"> </p>
   <script>
      function goforward() {
         history.forward();
         document.getElementById("output").innerHTML =
		 "You will have forwarded to next URL if it exists."
     }
   </script>
</body>
</html>

JavaScript History go() Method

The go() method of the history object takes you to the specific URL of the browser's session.

Syntax

Follow the syntax below to use the go() method.

history.go(count);

In the above syntax, 'count' is a numeric value representing which page you want to visit.

Example

In the below code, we use the go() method to move to the 2nd previous page from the current web page.

<html>
<body>
   <p> Click the below button to load 2nd previous URL</p>
   <button onclick = "moveTo()"> Move at 2nd previous URL </button>
   <p id = "output"> </p>
   <script>
      function moveTo() {
         history.go(-2);
         document.getElementById("output").innerHTML =
		 "You will have forwarded to 2nd previous URL if it exists.";
      }
   </script>
</body>
</html>

Example

In the below code, we use the go() method to move to the 2nd previous page from the current web page.


<html>
<body>
   <p> Click the below button to load 2nd next URL</p>    
   <button onclick = "moveTo()"> Move at 2nd next URL </button>
   <p id = "output"> </p>
   <script>
      function moveTo() {
         history.go(2);
         document.getElementById("output").innerHTML = 
		 "You will have forwarded to 2nd next URL if it exists.";
      }
  </script>
</body>
</html>

Following is the complete window history object reference including both properties and methods −

History Object Property List

The history object contains only the 'length' property.

Property	Description
length	It returns the object's length, representing the number of URLS present in the object.

History Object Methods List

The history object contains the below 3 methods.

Method	Description
back()	It takes you to the previous web page.
forward()	It takes you to the next web page.
go()	It can take you to a specific web page.