JavaScript | History object

The window.history object contains the browsers history. First of all, window part can be removed from window.history just using history object alone works fine. The JS history object contains an array of URLs visited by the user. By using history object, you can load previous, forward or any particular page using various methods.
Property of JavaScript history object :

  • length: It returns the length of the history URLs visited by user in that session.

Methods of JavaScript history object :

  • forward(): It loads the next page. Provides a same effect as clicking back in the browser.
  • back(): It loads the previous page. Provides a same effect as clicking forward in the browser.
  • go(): It loads the given page number in browser. history.go(distance) function provides a same effect as pressing the back or forward button in your browser and specifying the page exactly which you want to load.

JavaScript code to show the working of history.back() function:
Code #1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>
<title>GeeksforGeeks back() example</title>
</head>
<body>
<b>Press the back button</b>
<input type="button" value="Back" onclick="previousPage()">
<script>
function previousPage() {
    window.history.back();
}
</script>
</body>
</html

chevron_right


Output:

Press the back button Back

Click here to see the effect of the code
Note : This example will not work if the previous page does not exist in the history list.If you click the above link then new page opens and when you press back button on that page it will redirects to that page which you opened previously.

JavaScript code to show the working of history.forward() function:
Code #2 :

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>
<title>GeeksforGeeks forward() example</title>
</head>
<body>
<b>Press the forward button</b>
<input type="button" value="Forward" onclick="NextPage()">
<script>
function NextPage() {
    window.history.forward()
}
</script>
</body>
</html>

chevron_right


Press the forward button Forward

Note : This example will not work if the next page does not exist in the history list. This code can be used when you want to use the forward button in your webpage. It works exactly same as forwarding button of your browser. If the next page doesn’t exist it will not work.

JavaScript code to show the working of history.go() function:
go(4) has the same effect as pressing your forward button four times.A negative value will move you backwards through your history in a browser.go(-4) has the same effect as pressing your back button four times.
Code #3:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>
<title>GeeksforGeeks go() example</title>
</head>
<body>
<input type="button" value="go" onclick="NextPage()">
<script>
function NextPage() {
    window.history.go(4);
}
</script>
</body>
</html

chevron_right


Note : This example will not work if the next four pages do not exist in the history list.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.