The History Object

You will be able to use the JavaScript History object to move backward and forward through the current browser tab's session history.

What it is

The History object is accessed as window.history. It represents the session history for the current tab: the ordered list of pages visited in that tab. Think of a timeline with a pointer. history.back() moves one entry toward older pages, history.forward() moves one entry toward newer pages, and history.go(n) moves n entries. Negative numbers go backward, positive numbers go forward, and zero reloads the current page. history.length gives the number of entries in the session history, not the browser's total history. Related terms include history.state, popstate, pushState(), and replaceState().

Why it matters

• It lets you build custom Back and Forward buttons that behave like browser navigation.
• It supports single-page applications that move through routes without loading a new document.
• It lets you check whether a previous entry is likely available, for example with history.length > 1.
• It works with the popstate event so your interface can update when history changes.

Syntax or steps

The smallest useful pattern is a direct method call:

history.back();
history.forward();
history.go(-1);
history.go(1);
history.go(0);
console.log(history.length);

For interactive pages, attach these calls to events and listen for popstate if your app changes content without loading a new document.

Example

<!DOCTYPE html>
<html>
<body>
  <button id="back">Back</button>
  <button id="forward">Forward</button>
  <button id="two">Go back two pages</button>
  <p id="status"></p>

  <script>
    const status = document.getElementById('status');

    function showStatus() {
      status.textContent = 'History length: ' + history.length;
    }

    document.getElementById('back').addEventListener('click', () => {
      history.back();
    });

    document.getElementById('forward').addEventListener('click', () => {
      history.forward();
    });

    document.getElementById('two').addEventListener('click', () => {
      history.go(-2);
    });

    window.addEventListener('popstate', showStatus);
    showStatus();
  </script>
</body>
</html>

Part-by-part explanation

The buttons call history.back(), history.forward(), and history.go(-2). The first two move one step in the session history. The third moves two steps backward. The showStatus() function writes history.length into the page. The popstate listener updates the status when the active history entry changes, such as after a back or forward navigation.

Common mistakes

• Assuming history.length counts every page the browser has ever visited. It counts entries in the current tab's session history.
• Calling history.back() when there is no previous entry and expecting an error. Usually nothing happens.
• Confusing history navigation with loading a new URL. history.back() moves through existing entries; location.href = ... loads a new page.
• Forgetting to handle popstate in a single-page app. If the user clicks the browser Back button, your JavaScript must update the visible content.

When to use it

Use the History object when you want to move through the current session history. Use location.href or a normal link when you want to load a specific new URL.

Practice

Guided exercise: Create a page with two links to other pages and a button that calls history.back(). Visit the second page, click the button, and observe that you return to the first page.

Challenge: Add a button that calls history.go(-2) and a popstate listener that logs history.length. Navigate through three pages, then click the button.

Expected output or hint: The log should show the session history length after the navigation. If nothing happens, check that there are at least two previous entries in the current tab.

Quick check

Question: What does history.go(-1) do?

Answer: It moves one entry backward in the current tab's session history, similar to history.back().

Summary

The History object gives JavaScript access to the current tab's session history. Its main navigation methods are back(), forward(), and go(), while length reports how many entries are available in that session. Use it for browser-like navigation and single-page app route changes, not for loading arbitrary new URLs.