Open In App

Web API History

Last Updated : 28 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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:


ezgifcom-crop(1)
history1

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:

ezgifcom-video-to-gif
history1

Browser Support:

  • Chrome
  • Microsoft Edge
  • Fire Fox
  • Safari
  • Opera

Next Article
Must Coding Questions - Company-wise

K
kumarbalit8
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox