In this article, we will learn how to access history in JavaScript. We will use the History object to access the history stack in JavaScript. Every web browser will store the data on which websites or webpages opened during the session in a history stack. To access this history stack we need to use the History object in JavaScript.
History object: The history object contains the browser’s history. The URLs of pages visited by the user are stored as a stack in the history object. There are multiple methods to manage/access the history object.
Methods of History object:
1. The forward() Method: This method is used to load the next URL in the history list. This has the exact functionality as the next button in the browser. There are no parameters and it will return nothing.
Syntax:
history.forward()
2. The back() Method: This method is used to load the previous URL in the history list. This has the exact functionality as the back button in the browser. There are no parameters and it will return nothing.
Syntax:
history.back()
3. The go() Method: This method is used to loads a URL from the history list.
Syntax:
history.go(integer)
Parameters: This method has a single parameter that specifies the URL from the history. It can have the following values:
| Value | Usage |
| -1 | Loads the previous page from the history stack |
| 0 | Reloads the page. |
| 1 | Loads the next page from the history stack |
Example 1: Using forward() and back()Â
neveropenhtml.html
<!DOCTYPE html> <html> Â Â <head> Â Â Â Â <style> Â Â Â Â Â Â Â Â a, Â Â Â Â Â Â Â Â input { Â Â Â Â Â Â Â Â Â Â Â Â margin: 10px; Â Â Â Â Â Â Â Â } Â Â Â Â </style> </head> Â Â <body> Â Â Â Â <h1>This is page 1</h1> Â Â Â Â Â Â <a href="/neveropenhtml2.html">Go to page 2</a> <br> Â Â Â Â Â Â back button : <input type="button"Â Â Â Â Â Â Â Â Â value="Back" onclick="previousPage()"> <br> Â Â Â Â Â Â forward button : <input type="button"Â Â Â Â Â Â Â Â Â value="Forward" onclick="NextPage()"> <br> Â Â Â Â Â Â Â Â Â Â Â Â Â Â <script> Â Â Â Â Â Â Â Â function NextPage() { Â Â Â Â Â Â Â Â Â Â Â Â window.history.forward() Â Â Â Â Â Â Â Â } Â Â Â Â Â Â Â Â function previousPage() { Â Â Â Â Â Â Â Â Â Â Â Â window.history.back(); Â Â Â Â Â Â Â Â } Â Â Â Â </script> </body> Â Â </html> |
neveropenhtml2.html
<!DOCTYPE html> <html> Â Â <head> Â Â Â Â <style> Â Â Â Â Â Â Â Â a, Â Â Â Â Â Â Â Â input { Â Â Â Â Â Â Â Â Â Â Â Â margin: 10px; Â Â Â Â Â Â Â Â } Â Â Â Â </style> </head> Â Â <body> Â Â Â Â <h1>This is page 2</h1> Â Â Â Â Â Â back button : <input type="button"Â Â Â Â Â Â Â Â Â value="Back" onclick="previousPage()"> <br> Â Â Â Â Â Â forward button : <input type="button"Â Â Â Â Â Â Â Â Â value="Forward" onclick="NextPage()"> <br> Â Â Â Â Â Â Â Â Â Â Â Â Â Â <script> Â Â Â Â Â Â Â Â function NextPage() { Â Â Â Â Â Â Â Â Â Â Â Â window.history.forward() Â Â Â Â Â Â Â Â } Â Â Â Â Â Â Â Â function previousPage() { Â Â Â Â Â Â Â Â Â Â Â Â window.history.back(); Â Â Â Â Â Â Â Â } Â Â Â Â </script> </body> Â Â </html> |
Output:
Example 2: Using go(), forward() and back() methods.
neveropenhtml.html
<!DOCTYPE html> <html> Â Â <head> Â Â Â Â <style> Â Â Â Â Â Â Â Â a, Â Â Â Â Â Â Â Â input { Â Â Â Â Â Â Â Â Â Â Â Â margin: 10px; Â Â Â Â Â Â Â Â } Â Â Â Â </style> </head> Â Â <body> Â Â Â Â <h1>This is page 1</h1> Â Â Â Â Â Â <a href="/neveropenhtml2.html">Go to page 2</a> <br> Â Â Â Â Â Â back button : <input type="button"Â Â Â Â Â Â Â Â Â value="Back" onclick="previousPage()"> <br> Â Â Â Â Â Â forward button : <input type="button"Â Â Â Â Â Â Â Â Â value="Forward" onclick="NextPage()"> <br> Â Â Â Â Â Â Go button : <input type="button"Â Â Â Â Â Â Â Â value="go" onclick="go()"> <br> Â Â Â Â Â Â Â Â Â Â Â Â Â Â <script> Â Â Â Â Â Â Â Â function NextPage() { Â Â Â Â Â Â Â Â Â Â Â Â window.history.forward() Â Â Â Â Â Â Â Â } Â Â Â Â Â Â Â Â function previousPage() { Â Â Â Â Â Â Â Â Â Â Â Â window.history.back(); Â Â Â Â Â Â Â Â } Â Â Â Â Â Â Â Â function go() { Â Â Â Â Â Â Â Â Â Â Â Â window.history.go(0); Â Â Â Â Â Â Â Â } Â Â Â Â </script> </body> Â Â </html> |
neveropenhtml2.html
<!DOCTYPE html> <html> Â Â <head> Â Â Â Â <style> Â Â Â Â Â Â Â Â a, Â Â Â Â Â Â Â Â input { Â Â Â Â Â Â Â Â Â Â Â Â margin: 10px; Â Â Â Â Â Â Â Â } Â Â Â Â </style> </head> Â Â <body> Â Â Â Â <h1>This is page 2</h1> Â Â Â Â Â Â back button : <input type="button"Â Â Â Â Â Â Â Â Â value="Back" onclick="previousPage()"> <br> Â Â Â Â Â Â forward button : <input type="button"Â Â Â Â Â Â Â Â value="Forward" onclick="NextPage()"> <br> Â Â Â Â Â Â Go button : <input type="button"Â Â Â Â Â Â Â Â Â value="go" onclick="go()"> <br> Â Â Â Â Â Â Â Â Â Â Â Â Â Â <script> Â Â Â Â Â Â Â Â function NextPage() { Â Â Â Â Â Â Â Â Â Â Â Â window.history.forward() Â Â Â Â Â Â Â Â } Â Â Â Â Â Â Â Â function previousPage() { Â Â Â Â Â Â Â Â Â Â Â Â window.history.back(); Â Â Â Â Â Â Â Â } Â Â Â Â Â Â Â Â function go() { Â Â Â Â Â Â Â Â Â Â Â Â window.history.go(0); Â Â Â Â Â Â Â Â } Â Â Â Â </script> </body> Â Â </html> |
Output:
