Best Way of Using JavaScript Back and Forward Methods for Browsers

DOM is a part of the browser window object (BOM). BOM allows JavaScript to communicate with the browser. It has several components you can access: history, location, navigator, screen and document. In this tutorial, you will learn all about BOM history component.

This tutorial explains the JavaScript back and forward methods used to access and store URLs of the previous and next pages a user visits. These methods are similar to Forward and Back buttons in your browser.

JavaScript window.history: Main Tips

• The window history object holds information about internet browsers history.
• The window prefix is not necessary when using the object.
• There are restrictions when using JavaScript window history object to protect the user's privacy.
• JavaScript window history contains JavaScript back and forward methods.
• The window.history pushstate method can be used to create and activate new history entries.

Going Back

The JavaScript history back method finds the URL of the previous page and loads it. Basically, JavaScript back method does the exact same function as pressing the browsers BACK button. Let's see an example on how to use history.back() correctly:

function goPrev(){ 
   window.history.back() 
}

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Moving Forward

The history.forward() method finds the URL of the next page in history and loads it. In other words, it performs the exact same function as pressing the browsers FORWARD button:

function pageForward() {     
   window.history.forward()    
}

JavaScript window.history: Summary

• window.history contains information about the browsers history.
• JavaScript back and forward methods can be used to get URLs of the previous and next pages visited by the user.
• To make a new history entry manually and activate it, you can use the window.history pushstate method.