Do you think IIT Guwahati certified course can help you in your career?
No
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).
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
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
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
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
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
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
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.