Sometimes, we want to modify a query string without reloading the page with JavaScript.

In this article, we’ll look at how to modify a query string without reloading the page with JavaScript.

How to modify a query string without reloading the page with JavaScript?

To modify a query string without reloading the page with JavaScript, we can use the history.pushState method.

For instance, we write

const newUrl =
  window.location.protocol +
  "//" +
  window.location.host +
  window.location.pathname +
  "?myNewUrlQuery=1";
window.history.pushState({ path: newUrl }, "", newUrl);

to create the newUrl URL string.

Then we call pushState with { path: newUrl } and newUrl to navigate to newUrl without reloading the page.

We get the current URL data from window.location.

We get the protocol with window.location.protocol.

host has the hostname.

pathname has the path before the query string.

Conclusion

To modify a query string without reloading the page with JavaScript, we can use the history.pushState method.