JavaScript history Object

Written by Swapnil RajaPublished 24 Aug 2026

history controls the browser's back and forward navigation stack.

It is the mechanism behind the browser's back and forward buttons.

Single-page applications use it to change the URL without reloading.

Example

javascript

console.log(typeof history.back);
console.log(typeof history.length);

The output is function then number.

The Methods

back() and forward() move one step.

go(n) moves several steps at once.

pushState adds a new entry without reloading the page.

PreviousJavaScript location Object NextJavaScript navigator Object

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript history Object</title>
</head>
<body>

  <h1>The history Object</h1>

  <button id="tab1">Tab One</button>
  <button id="tab2">Tab Two</button>

  <p id="out">Tab One</p>

  <script>
    function showTab(name) {
      document.getElementById("out").textContent = name;
    }

    document.getElementById("tab1").addEventListener("click", function () {
      history.pushState({ tab: "one" }, "", "#tab1");
      showTab("Tab One");
    });

    document.getElementById("tab2").addEventListener("click", function () {
      history.pushState({ tab: "two" }, "", "#tab2");
      showTab("Tab Two");
    });

    window.addEventListener("popstate", function (event) {
      showTab(event.state ? "Tab " + (event.state.tab === "one" ? "One" : "Two") : "Tab One");
    });
  </script>

</body>
</html>

JavaScript history Object

Example

The Methods

Syntax

Moving Through History

Example

pushState Changes the URL

Example

Reacting to Back and Forward

Example

State Data

Example

replaceState

Example

Complete Example

Try It Yourself

Important Points

Conclusion