Update a URL Without a Reload

history.pushState adds a same-origin history entry without fetching a new document. The school can reflect a selected roll number in the address, then render the corresponding view separately.

Before this topic, review Keep a Setting for One Page Session if its terms are unfamiliar.

This is JavaScript in a browser. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

In modern single-page applications (SPAs), it's common to update the URL or manipulate the browser history without refreshing the page. JavaScript offers the window.location and history APIs to handle this.

You can access different parts of the current URL using window.location.

console.log("Full URL:", window.location.href);
console.log("Protocol:", window.location.protocol);
console.log("Host:", window.location.host);
console.log("Pathname:", window.location.pathname);
console.log("Search Params:", window.location.search);
console.log("Hash:", window.location.hash);

Full URL: https://example.com/products?item=42#details
Protocol: https:
Host: example.com
Pathname: /products
Search Params: ?item=42
Hash: #details

The pushState() method allows you to update the browser’s address bar without reloading the page.

history.pushState({ page: 1 }, "Title 1", "/page1");
console.log(window.location.href);

https://yourdomain.com/page1

• stateObject: A JavaScript object associated with the new history entry.
• title: Not widely used, but required for compatibility.
• url: The new URL you want to appear in the address bar.

If you want to change the URL without adding a new entry to the history stack, use replaceState().

history.replaceState({ page: 2 }, "Title 2", "/page2");
console.log(window.location.href);

https://yourdomain.com/page2

A: No. Since replaceState() doesn’t add a new entry, there's no previous page to return to using the back button.

history.back();     // Simulates browser back button
history.forward();  // Simulates browser forward button
history.go(-1);     // One step back
history.go(1);      // One step forward

A: Use pushState() when you want to update the URL without reloading the page — especially useful in SPAs.

To detect when the user navigates using the browser back/forward buttons:

window.addEventListener('popstate', function(event) {
  console.log("Location changed!", event.state);
});

• location lets you read and manipulate the full URL.
• pushState() adds a new URL to history without reloading.
• replaceState() modifies the current history entry.
• back(), forward(), and go() help navigate history programmatically.

Q1: How can you update the URL without causing a page reload?

A1: Use history.pushState() or history.replaceState().

Q2: What’s the difference between pushState() and replaceState()?

A2: pushState() adds a new entry; replaceState() modifies the current one.

pushState does not itself fire popstate or render a page. Back/forward navigation needs a listener, and deployed routes must also work on direct visits.

Your task: Replace roll:2 with roll:3. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

Changing only the state object does not change the separately supplied URL string; the query still says roll=2.

history.pushState adds a same-origin history entry without fetching a new document. The school can reflect a selected roll number in the address, then render the corresponding view separately.

Check your variation against this explanation: Changing only the state object does not change the separately supplied URL string; the query still says roll=2.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.