• +91-8294938831

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript History Object

← Previous Next →

The JavaScript History Object is part of the Browser Object Model (BOM). It allows your website to interact with the browser’s history — like moving forward, going back, or jumping to a specific page in the history list.

In simple words, it helps you control navigation without requiring the user to click the back or forward buttons.

What is the History Object?

The history object is a property of the window object, so you can access it as window.history or just history.

It represents the list of pages the user has visited in the current tab.

Example:

console.log(history);
console.log(window.history); // Both are the same

Why Use the History Object?

The history object is useful when you want to:

  • Go back to the previous page.

  • Move forward to the next page.

  • Navigate multiple pages in the history list.

  • Create single-page applications (SPA) navigation without full page reload.

History Object Properties

The history object has one commonly used property:

Property Description
history.length Returns the total number of pages in the session history.

Example:

console.log("Number of pages in history:", history.length);

history.length includes the current page.

History Object Methods

The history object has three main methods:

1. history.back()

Goes to the previous page in the history.

// Go back one page
history.back();

Equivalent to clicking the browser’s back button.

2. history.forward()

Goes to the next page in the history.

// Go forward one page
history.forward();

Equivalent to clicking the browser’s forward button.

3. history.go()

Goes to a specific page in history using an index.

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

// Go forward 1 page
history.go(1);

// Reload the current page
history.go(0);

  • Negative numbers go back in history.

  • Positive numbers go forward in history.

  • 0 reloads the current page.

Practical Example: Navigation Buttons

You can create back and forward buttons for your website:

<button onclick="history.back()">Go Back</button>
<button onclick="history.forward()">Go Forward</button>
<button onclick="history.go(-2)">Go Back 2 Pages</button>
<button onclick="history.go(1)">Go Forward 1 Page</button>

  • The first button moves back one page.

  • The second button moves forward one page.

  • The third button goes back two pages.

  • The fourth button moves forward one page.

Checking History Length

You can check how many pages the user has visited in the current tab:

console.log("History length:", history.length);
if(history.length > 1){
    alert("You have visited multiple pages in this tab.");
} else {
    alert("You are on the first page of this tab.");
}

This can help decide whether to show a back button or not.

Single Page Applications (SPA) and History

In SPAs, developers often use history.pushState() and history.replaceState() to change the URL without reloading the page.

Example:

// Change the URL without reloading
history.pushState({page: 1}, "Title 1", "?page=1");
history.pushState({page: 2}, "Title 2", "?page=2");

// Replace current state
history.replaceState({page: 3}, "Title 3", "?page=3");

  • pushState() adds a new entry to history.

  • replaceState() replaces the current history entry.

This is widely used in modern web apps to update URLs dynamically while keeping users on the same page.

Listening for History Changes

You can detect when the user navigates using the back or forward buttons using the popstate event:

window.addEventListener("popstate", function(event){
    console.log("Location changed:", document.location.href);
    console.log("State object:", event.state);
});

  • The popstate event triggers when history changes via back, forward, or go().

  • The event.state contains the state object you passed to pushState() or replaceState().

Limitations of the History Object

  1. You cannot read the full history for privacy reasons — only the number of entries (history.length).

  2. You cannot access pages in other tabs or windows.

  3. Using history.back() or history.forward() depends on user history — if no pages exist, nothing happens.

  4. pushState() and replaceState() only work for modern browsers.

Best Practices

  1. Use history navigation carefully, don’t force users back and forth unexpectedly.

  2. For SPAs, always update state objects with pushState() to track navigation.

  3. Use popstate events to handle custom actions when users navigate.

  4. Always test history functions in multiple browsers to avoid unexpected behavior.

Summary of the Tutorial

The JavaScript History Object allows you to control the browser’s history. With it, you can:

  • Go back or forward in the browser history.

  • Jump to a specific page using history.go().

  • Track the number of pages in the session.

  • Dynamically change URLs without reloading pages (SPAs).

  • Respond to navigation events using popstate.

Mastering the history object is important for building dynamic, user-friendly web applications and controlling page navigation smoothly.

Practice Questions

  1. How can you go back one page in the browser history using the history object?

  2. Write a script to move forward one page in history when a button is clicked.

  3. How can you navigate back two pages and forward one page using history.go()?

  4. How can you check how many pages are in the current tab’s history?

  5. Write code to reload the current page using the history object.

  6. How can you add a new entry to the browser history without reloading the page using pushState()?

  7. How can you replace the current history entry with a new URL using replaceState()?

  8. How can you listen for back and forward navigation using the popstate event and log the new URL?

  9. Write a program that shows an alert if the user tries to go back but there is no previous page.

  10. Create a set of buttons that navigate backward, forward, and reload the page using history methods.

← Previous Next →

Try a Short Quiz.

No quizzes available.


CodePractice Blogs

Latest Blogs on JavaScript

JavaScript

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

codepractice logo
Login
Go Back Top