JavaScript | History object

09 Jul, 2018
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:
<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> 
Output:
Press the back button Back

Click here to see the effect of the codeNote : 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 :
<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>
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:
<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> 
Note : This example will not work if the next four pages do not exist in the history list.
javascript-object
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
JavaScript | Promises
How to filter object array based on attributes?
Lodash _.debounce() Method
JavaScript String includes() Method
JavaScript | fetch() Method
How to map, reduce and filter a Set element using JavaScript ?