Yogesh Chauhan's Blog

3 JavaScript methods to use when you want to go back and forth in history

in JavaScript on April 25, 2019

The DOM Window object provides access to the browser’s session history through the history object.

Moving backward and forward through the user’s history is done using the back(), forward(), and go() methods.

Moving forward and backward

window.history.back() method in JavaScript

To move backward through history use this:



window.history.back()


The back() method loads the previous URL in the history list. This acts exactly as if the user clicked on the Back button in their browser toolbar.

How to use it?

Just add the following cod in your button.



onclick="window.history.back()"


window.history.forward() method in JavaScript

Similarly, you can move forward (as if the user clicked the Forward button), using this:



window.history.forward()


The forward() method loads the next URL in the history list.

How to use it?

Just add the following cod in your button.



onclick="window.history.forward()"


Moving to a specific point in history

go() method

The go() method loads a specific URL from the history list.

You can use the go() method to load a specific page from session history, identified by its relative position to the current page, current page’s relative position = 0.

How to use it?



window.history.go(-1)

//same as using back() method

window.history.go(1)

//same as using forward() method

For 2 it will go forward 2 pages and for -2 it will go back 2 pages.

What if you add 0?

It will refresh the current page!

We can refresh the current page by either passing 0, or by invoking it without an argument.

For example,



window.history.go(0)
window.history.go()

//both will refresh the current page



Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
HTML canvas methodsHTMLHow to convert an HTML radio buttons into a toggle switch using CSS?CSSHow to check if radio button is checked or not using JavaScript?JavaScriptCROSS JOIN in PostgresPostgresWill SQL (Relational) Database become obsolete?SQL/MySQLHow to insert Bootstrap 4 in Angular 9 app?Angular