JavaScript Storage & BOM

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.

Syntax

javascript

history.back();
history.pushState(state, "", url);

pushState changes the address bar but not the page content.

Moving Through History

go takes a number of steps, positive or negative.

Example

javascript

console.log(typeof history.go);

history.go(-1) is the same as history.back().

pushState Changes the URL

It adds a new entry to history without a page reload.

This is the basis of client-side routing.

Example

javascript

console.log(typeof history.pushState);

Calling it updates the address bar; nothing else happens automatically.

Reacting to Back and Forward

The popstate event fires when the visitor navigates with the browser buttons.

This is how a single-page app updates its content to match.

Example

javascript

window.addEventListener("popstate", function (event) {
  console.log("navigated, state is", event.state);
});

console.log("listener attached");

Nothing in this snippet triggers the event; it fires on real navigation.

State Data

The first argument to pushState can carry your own data.

Example

javascript

function buildState(page) {
  return { page: page };
}

console.log(buildState("products").page);

That object comes back in event.state on popstate.

replaceState

replaceState changes the current entry instead of adding a new one.

Use it when the change should not create a new back-button step.

Example

javascript

console.log(typeof history.replaceState);

The signature matches pushState exactly.

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>

Try It Yourself

Run the above example in the Try It Editor.

Try the back button:

Click both tabs, then use the browser's back button.

Important Points

back, forward and go move through history.
pushState adds an entry without reloading.
popstate fires when the visitor navigates with the browser buttons.
State data travels with the entry and returns in the event.
replaceState updates the current entry instead of adding one.

Conclusion

The history object is what makes client-side routing possible.

It lets a page change its URL and respond to navigation without a full reload.

This is the foundation every single-page app router is built on.

PreviousJavaScript location Object NextJavaScript navigator Object