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:
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:
history1
Browser Support:
- Chrome
- Microsoft Edge
- Fire Fox
- Safari
- Opera