Web API History

Last Updated : 24 Apr, 2025

Web API History is the API that is used to access the browser history. It basically gives us access to the history of global objects. This API is useful when we are dealing with the session history of a web browser. It gives us some useful methods and properties to access and manage the history object of the browser.

Concepts and Usage

Some of the basic usages of History API are:

It is used to navigate back and forward through the history stack.
It is used to store and retrieve the state information associated with the history entry.
It is used to create single-page applications that can update the content and URL of of page without refreshing the entire page.

Web API History Interfaces

History: It allows us to manipulate the browser session history.
PopStateEvent: It is an interface for pop state which is triggered when active history changes while the user navigates the session history.

Web API History Methods

back(): To move backward through history we can use the back method. It is the same as the back button in their browser button.
forward(): To move forward through history we can use the forward method. It is the same as the forward button.
go(): To load a specific page from session history. We can use relative position with the current page as a position argument in the go method to load the page.

Example 1: In this example, we will go forward and back using the history forward and back method.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <center>
        <div>
            <h1 style="color: green;">
                  GeeksforGeeks
              </h1>
            <h2>Hello geeks</h2>
            <h2>This is First Page</h2>
            <button onclick="location.href='b.html'">
                  Go next page
              </button> <br/><br />
            <button onclick="history.forward(1)">
                  Go to Previoous page
              </button>
        </div>
    </center>
</body>

</html>

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <center>

        <div>
            <h1 style="color: green;">
                  GeeksforGeeks
              </h1>
            <h2>Hello geeks</h2>
            <h2>This is second page</h2>

            <button onclick="location.href='c.html'">
                  Go to next Page
              </button>
            <button onclick="history.back()">
                  Go Back
              </button>
            <button onclick="history.forward(1)">
                  Go to Previoous page
              </button>
        </div>
    </center>
</body>

</html>

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <center>
        <div>
            <h1 style="color: green;">
                  GeeksforGeeks
              </h1>
            <h2>Hello geeks</h2>
            <h2>This is Third page</h2>
            <button onclick="history.back()">
                  Go to previous page
              </button>
        </div>
    </center>
</body>

</html>

Output:

Example 2: In this example we will move forward and back in session history using history.go() method.

HTML

<!-- home.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <center>
        <div>
            <h1 style="color: green;">
                GeeksforGeeks
            </h1>
            <h3>Hello geeks</h3>
            <h3>This is First Page</h3>
            <h3> click on button to visit next site</h3>
            <button onclick="location.href='b.html'">
                Go to Second Page
            </button>
            <button onclick="location.href='c.html'">
                Go to Third Page
            </button>

        </div>
    </center>
</body>

</html>

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <center>
        <div>
            <h1 style="color: green;">
                  GeeksforGeeks
              </h1>
            <h2>Hello geeks</h2>
            <h2>This is second page</h2>
            <button onclick="history.back()">
                  Go Back
              </button>
            <button onclick="location.href='c.html'">
                  Go to next Page
              </button>

        </div>
    </center>
</body>

</html>

HTML

<!-- temp.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <center>
        <div>
            <h1 style="color: green;">
                  GeeksforGeeks
              </h1>
            <h2>Hello geeks</h2>
            <h2>This is Third page</h2>
            <button onclick="history.go(-1)">
                  Go to Second Page
              </button>
            <button onclick="history.go(-2)">
                  Go to First Page
              </button>

        </div>
    </center>
</body>

</html>

Output:

Browser Support:

Chrome
Microsoft Edge
Fire Fox
Safari
Opera

History of AI

kumarbalit8

Improve

Article Tags :

Web API History

Concepts and Usage

Web API History Interfaces

Web API History Methods

Browser Support:

Similar Reads

Thank You!

What kind of Experience do you want to share?