Time Traveling in the Browser

The History Object is a property of the Window object (window.history). It contains an array of the URLs visited by the user within that specific browser tab (the session history).

For security and privacy reasons, JavaScript cannot actually read the URLs in the history array, but it provides methods allowing you to navigate back and forth through them.

Going Back and Forward

You can programmatically trigger the browser's "Back" and "Forward" buttons using the history object.

// Go back one page (same as clicking the Back arrow)
window.history.back();

// Go forward one page (same as clicking the Forward arrow)
window.history.forward();

The `go()` Method

If you want to jump multiple pages backward or forward, you can use the go() method by passing a positive or negative integer.

// Go back 2 pages
window.history.go(-2);

// Go forward 3 pages
window.history.go(3);

Checking History Length

You can find out how many pages the user has visited in the current tab session using the length property.

console.log(window.history.length);

💡 Himanshu's Tip:

While the classic history object is good to know, modern frontend frameworks like React (using React Router) and Next.js completely hijack the browser history using the advanced History API (pushState and replaceState) to create incredibly fast Single Page Applications (SPAs) without actual page reloads!

Interview Questions

Can you extract the exact string URLs of the pages a user visited from the history object? Why or why not?
What does history.go(-1) do?
How does the browser history in a Single Page Application (SPA) differ from a traditional multi-page website?