Table of contents
1.
Introduction
2.
Moving backwards
3.
Moving forward
4.
Moving specifically
5.
pushState()
6.
replaceState()
7.
History Object Properties
8.
Browser Support
9.
Frequently Asked Questions
10.
Key Takeaways
Last Updated: Mar 27, 2024

Web History API

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Ever wondered how you can access the browser's session history? The web history API(Application Programming Interface) lets us do that. This is achieved through the use of the window.history object in the web history API. 

 

The window.history read-only property returns a reference to the History object, which provides an interface for manipulating the browser session history (pages visited in the tab or frame that the current page is loaded in).

Also Read, Javascript hasOwnProperty

Moving backwards

The previous URLs are present in the window.history list. They can be accessed using the back() method included in the web history API. The back() method does the same action as we do by clicking the "back arrow" in our browser.

 

Code:

<button onclick="goBack()">Moving backwards</button>
<script>
function goBack() {
 window.history.back();
}
</script>
You can also try this code with Online Javascript Compiler
Run Code

Moving forward

We can move forward in the window.history URL using the window.history.forward() method included in the web history API. This has the same effect as clicking the forward button in our browser.

 

Code:

<button onclick="goAhead()">Moving forward</button>
<script>
function goAhead() {
 window.history.forward();
}
</script>
You can also try this code with Online Javascript Compiler
Run Code

Moving specifically

We can load specific pages from the session history using the go() method included in the web history API. An argument can be passed to the go() method to indicate where we wish to move in the window.history URL. 

 

Note that the current page relative position is 0.

 

Code:

window.history.go(0) // Page refresh effect
window.history.go() // Page refresh effect
window.history.go(-1) // Same as using the window.history.back() method
window.history.go(1) // Same as using the window.history.forward() method 
You can also try this code with Online Javascript Compiler
Run Code

pushState()

The pushState() function of the history object is used to push a state onto the history stack.

 

Code:

var state = {};
var pageTitle = "";
var URL  = "coding-ninjas.html";
// Pushing a new URL into the history stack
history.pushState(state, pageTitle , URL );
You can also try this code with Online Javascript Compiler
Run Code

replaceState()

The replaceState() function replaces the history element in the history stack that is being pointed to right now.

 

Code:

var state = {};
var pageTitle = "";
var URL   = "Coding Ninjas Studio.html";
// This will change the URL in the browser's address field but will not load it
history.replaceState(state, pageTitle, URL );
You can also try this code with Online Javascript Compiler
Run Code

History Object Properties

Property

Description

length It returns the number of URLs in the history list.

Browser Support

Browser Name

Has support

Chrome Yes
Edge Yes
Firefox Yes
Safari Yes
Opera Yes

Frequently Asked Questions

 

  1. What is the history stack?

The browsing history consists of a stack of URLs. As a user moves across different pages in a website the stack will get updated. Clicking the “back” button makes the pointer in the stack move to the previous element and so on.

 

2. What is the state object?

A state object is a JavaScript object which is associated with the new history entry created by pushState().

 

3. How is the history length property useful?

The history length property is useful as it gets us the number of URLs in the history list.

Key Takeaways

The web history API has various methods like go(), back(), forward() to perform activities that we usually achieve by manually clicking the forward or backward button in our browser. We can do page refresh by passing 0 as the argument to the go() method.

 

If you loved reading this article about the Web History API, check out Free JavaScript Tutorial By Coding Ninjas and 10 Best JavaScript Certifications In 2021.

Live masterclass