How to load the previous URL in the history list in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn to load the previous page in the history list in JavaScript.

The Window object in JavaScript accesses the window in the browser. This object contains many properties and methods required to do the tasks. The Window object also retrieves the information from the browser window.

There is a history stack in every browser that saves the pages visited by the user. To access this history stack, we can use the history object that is the property of the Window object. By accessing the history from the browser, we can go to the next or previous pages visited by the user.

Let us take a look to load the previous page in the history list in JavaScript.

Following are the Methods/Functions from the history object to load the previous page in the history list in JavaScript−

history.back() method
history.go() method

Using the history.back() Method

The history.back() is used to load the previous page visited by the user

But, it only works if the previous page exists in the history stack in a browser.

This method is similar to as clicking the back button in the browser.

Users can follow the below syntax to use the back() method from the history object for loading the history list’s previous page.

window.history.back();
   OR
history.back();

Example 1

In the below mentioned example, we have used the back() method to load the previous page in the history list in the browser.


<html>
<body>
   <h3>Use <i>history.back()</i> to load the previous page in the history list</h3>
   <button onclick = "goback()">go back</button>
   <p id = "output"> </p>
   <script>
      function goback(){
         window.history.back();
         document.getElementById("output").innerHTML = "You will have gone to previous page if it exists";
      }
   </script>
</body>
</html>

In the above example, users can see that we have used the back method on clicking the button. But, the page can only navigate to the previous page if it exists in the history stack in the browser.

Using the history.go() Method

The history.go() metthod is used to load the page through its number. We have to provide a page number of the page in the history as its parameter. The page number can be negative or positive based on whether it is a forward or backward page.

All the users can follow the below syntax to use the go() method from the history object to load the previous page in the history list−

Syntax

//We have to use negative values for previous pages
window.history.go(-page_number)
    OR
history.go(-page_number)

Parameters

page_number − Page number of a page in the history list in the browser.

Example

In the below example, we have used the go() method to load the previous page in the history list in the browser.


<html>
<body>
   <h3>Use <i>history.go()</i> to load the previous page in the history list</h3>
   <button onclick = "go()">go</button>
   <p id = "output"> </p>
   <script>
      function go(){
         window.history.go(-1);
         document.getElementById("output").innerHTML = "You will have gone to previous page if it exists";
      }
   </script>
</body>
</html>

In this tutorial, what we are learning is the two methods to load the previous page in the history list in JavaScript. Among these methods, history.back() is the method in the history object that loads the previous page in the history list. The history.go() is the method in the history object that loads the previous page while adding a negative one as a parameter.

Shubham Vora

Updated on: 14-Sep-2022

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started