Advance JavaScript (DOM, BOM, Web API) / Web API

History

🕘 History API

The History API allows JavaScript to control the browser's navigation history.

It is essential for building Single Page Applications (SPAs) where URLs change without reloading the page.

📌 What Is the History API?

The browser maintains a history stack, like a list of visited pages.

[ Page1 ] → [ Page2 ] → [ Page3 ] → ...

The History API lets you:

  • Move through this stack (back(), forward(), go())

  • Add or modify history entries (pushState(), replaceState())

  • React to user navigation (popstate event)

👀 Basic History API Methods

📌 1 history.length

Shows how many entries exist in the session history.

console.log(history.length);

📌 2 history.back()

Same as pressing browser Back button.

history.back();

📌 3 history.forward()

Moves forward in the stack if possible.

history.forward();

📌 4 history.go(n)

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

🧠 Manipulating Browser History Without Page Reload

Normally, when you change a URL:

/home → /profile

👉 The browser reloads the page

👉 HTML, CSS, JS are downloaded again

👉 State is lost

📌 Traditional Navigation (Reload Happens)

<a href="/profile">Profile</a>
Click link
→ Browser requests /profile
→ Page reload
→ JS starts again

📌 What History API Changes

The History API allows you to:

Change the URL AND browser history WITHOUT reloading the page

This is the foundation of SPAs (React, Angular, Vue, Next.js).

📌 Core Idea (Very Important)

URL ≠ Page Reload

With History API:

  • URL can change

  • History stack can update

  • UI updates manually using JS

  • Browser back/forward still works

📌 The Two Main Methods

1️⃣ history.pushState()

2️⃣ history.replaceState()

📌 1. history.pushState() — Add New History Entry

history.pushState(stateObject, title, url);

Parameters Explained

Parameter

Meaning

stateObject

JS data saved with this history entry

title

Ignored by most browsers

url

New URL shown in address bar

✔ URL changes to /profile

✔ Page does NOT reload

✔ New history entry is added

You MUST Update UI Manually

history.pushState({ page: "profile" }, "", "/profile");
renderProfilePage();

History API:

  • Changes URL

  • Changes history

  • DOES NOT change UI automatically

📌 2. history.replaceState() — Replace Current Entry

✔ URL changes

✔ No new history entry

✔ Back button skips Login

When to Use replaceState()

Use Case

Why

Login redirect

Prevent going back to login

Fix wrong URL

Update without history pollution

Step-based forms

Replace instead of pushing

📌 popstate Event — Reacting to History Navigation

Triggered when user clicks Back or Forward, NOT when calling pushState/replaceState.

When popstate Fires

Action

popstate

Browser Back button

✅

Browser Forward button

✅

history.go(-1)

✅

history.go(1)

✅

history.pushState()

❌

history.replaceState()

❌

❓ When to Use History API

When

Why

Building SPA

Avoids full page reload

Custom navigation

You control URL + UI

Dynamic content

Helps maintain browser navigation behavior

Scroll restoration

Remember user’s scroll position

❗️ Limitations

  • Cannot navigate to external websites using pushState.

  • state object should be small.

  • Does not trigger popstate when using pushState() or replaceState().

🧩 History API – Example

📁 Project Structure

history-api-demo/
│
├── index.html
├── style.css
└── script.js
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>History API Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>

  <!-- Navigation -->
  <nav>
    <button id="home">Home</button>
    <button id="profile">Profile</button>
    <button id="about">About</button>
  </nav>

  <!-- Content Area -->
  <main id="content">
    <h1>Home Page</h1>
    <p>Welcome! Click the buttons above to navigate.</p>
  </main>

  <footer>
    Try using browser Back & Forward buttons
  </footer>

  <script src="script.js"></script>
</body>
</html>
/* ===== RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background: #f4f6f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== NAVBAR ===== */
nav {
  width: 100%;
  background: #1e293b;
  padding: 16px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

nav button {
  background: #334155;
  color: white;
  border: none;
  padding: 10px 18px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

nav button:hover {
  background: #475569;
}

/* ===== CONTENT ===== */
#content {
  margin-top: 60px;
  padding: 40px;
  background: white;
  width: 90%;
  max-width: 600px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  text-align: center;
}

#content h1 {
  font-size: 36px;
  margin-bottom: 16px;
  color: #0f172a;
}

#content p {
  font-size: 18px;
  color: #475569;
}

/* ===== FOOTER ===== */
footer {
  margin-top: 30px;
  font-size: 14px;
  color: #64748b;
}
const content = document.getElementById("content");

function render(page) {
  content.innerHTML = `
    <h1>${page} Page</h1>
    <p>This content was loaded without page refresh.</p>
  `;
}

function navigate(page, url) {
  history.pushState({ page }, "", url);
  render(page);
}

// Navigation buttons
document.getElementById("home").addEventListener("click", () => {
  navigate("Home", "/home");
});

document.getElementById("profile").addEventListener("click", () => {
  navigate("Profile", "/profile");
});

document.getElementById("about").addEventListener("click", () => {
  navigate("About", "/about");
});

// Handle browser Back & Forward buttons
window.addEventListener("popstate", (event) => {
  if (event.state) {
    render(event.state.page);
  } else {
    render("Home");
  }
});

🧠 How This Example Works

🔹 Clicking a button

Button Click
→ pushState()
→ URL changes
→ render() updates content
→ NO PAGE RELOAD

🔹 Pressing Back / Forward

Browser navigation
→ popstate event fires
→ event.state contains page info
→ UI updates accordingly

🧪 What You Should Test

  1. Click Profile → URL becomes /profile

  2. Click About → URL becomes /about

  3. Press Back → Goes to Profile

  4. Press Forward → Goes to About

  5. Refresh page → stays on last URL