Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
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

Roadmap to SDE career at Amazon
Speaker
Anubhav Sinha
SDE-2 @
25 Jun, 2024 @ 01:30 PM

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>
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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

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.

Previous article
Web Forms API
Next article
Web Storage API
Live masterclass