Web History API

Ranjul Arumadi
Last Updated: May 13, 2022

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).

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>

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>

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 

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 );

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   = "codestudio.html";
// This will change the URL in the browser's address field but will not load it
history.replaceState(state, pageTitle, URL );

History Object Properties

Property

Description

lengthIt returns the number of URLs in the history list.

Browser Support

Browser Name

Has support

ChromeYes
EdgeYes
FirefoxYes
SafariYes
OperaYes

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.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think