Course
History Object
JavaScript Tutorial
This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.
History Object
Window History Object
In JavaScript, the window 'history' object contains information about the browser's session history. It contains the array of visited URLs in the current session.
The 'history' object is a property of the 'window' object. The history property can be accessed with or without referencing its owner object, i.e., window object.
Using the 'history' object's method, you can go to the browser's session's previous, following, or particular URL.
History Object Methods
The window history object provides useful methods that allow us to navigate back and forth in the history list.
Follow the syntax below to use the 'history' object in JavaScript.
window.history.methodName();ORhistory.methodName();You may use the 'window' object to access the 'history' object.
JavaScript History back() Method
The JavaScript back() method of the history object loads the previous URL in the history list.
Syntax
Follow the syntax below to use the history back() method.
history.back();Example
In the below code's output, you can click the 'go back' button to go to the previous URL. It works as a back button of the browser.
<html><body> <p> Click "Go Back" button to load previous URL </p> <button onclick="goback()"> Go Back </button> <p id = "output"> </p> <script> function goback() { history.back(); document.getElementById("output").innerHTML += "You will have gone to previous URL if it exists"; } </script></body></html>JavaScript History forward() Method
The
forward() method of the history object takes you to the next URL.Syntax
Follow the syntax below to use the forward() method.
history.forward();Example
In the below code, click the button to go to the next URL. It works as the forward button of the browser.
<html><body> <p> Click "Go Forward" button to load next URL</p> <button onclick = "goforward()"> Go Forward </button> <p id = "output"> </p> <script> function goforward() { history.forward(); document.getElementById("output").innerHTML = "You will have forwarded to next URL if it exists." } </script></body></html>JavaScript History go() Method
The go() method of the history object takes you to the specific URL of the browser's session.
Syntax
Follow the syntax below to use the go() method.
history.go(count);In the above syntax, 'count' is a numeric value representing which page you want to visit.
Example
In the below code, we use the
go() method to move to the 2nd previous page from the current web page.<html><body> <p> Click the below button to load 2nd previous URL</p> <button onclick = "moveTo()"> Move at 2nd previous URL </button> <p id = "output"> </p> <script> function moveTo() { history.go(-2); document.getElementById("output").innerHTML = "You will have forwarded to 2nd previous URL if it exists."; } </script></body></html>Example
In the below code, we use the go() method to move to the 2nd previous page from the current web page.
<html><body> <p> Click the below button to load 2nd next URL</p> <button onclick = "moveTo()"> Move at 2nd next URL </button> <p id = "output"> </p> <script> function moveTo() { history.go(2); document.getElementById("output").innerHTML = "You will have forwarded to 2nd next URL if it exists."; } </script></body></html>Following is the complete window history object reference including both properties and methods −
History Object Property List
The history object contains only the 'length' property.
History Object Methods List
The history object contains the below 3 methods.