Remove URL parameters without refreshing page

Understanding the tools: pushState and replaceState

The window.history.pushState() function is your MVP for modifying the URL without reloading the page. It aids in tweaking the URL for bookmarking, storing data, and altering history:

window.history.pushState({}, document.title, "/" + myNewURL);


However, remember that it adds an entry to the browser's session history. If you wish to overhaul the current state without creating a new one, reach out for its sibling function window.history.replaceState() instead.

Selecting pushState vs replaceState

history.pushState() is great at modifying URLs while keeping the user's back button history intact—handy when you want each URL state change to be recoverable.

// Let's make some history!
history.pushState({ page: 1 }, 'Chapter 1', '/ch1');


history.replaceState(), on the other hand, laughs in the face of history and overwrites the current entry. It's perfect for removing specific parameters or decluttering a URLs while the user stays put in their history navigation.

// New year, new me
history.replaceState({ page: 2 }, 'Chapter 2', '/ch2');


Handling browser personality quirks

Each browser treats pushState and replaceState slightly differently. For instance, Chrome is fine with an empty string for pushState, but Firefox might just give you the silent treatment:

// Works on Chrome, might be ghosted by Firefox
window.history.pushState({}, document.title, '');


Make sure your URL manipulation handles such cross-browser foibles gracefully. A quick feature detection to validate the History API's availability can save you from awkward bugs:

if ('history' in window && 'pushState' in history) {
  // It's morphing time!
}


Improving your URL surgery skills

Precision removal with URLSearchParams

To extract specific parameters, use the URLSearchParams tool—like a scalpel for your URL:

let urlParams = new URLSearchParams(window.location.search);
urlParams.delete('unwantedParam');
window.history.replaceState(null, '', `${location.pathname}?${urlParams}`);


Polyfill for the blast from the past

If nostalgia isn't your thing and you don't want to support pre-historic browsers like Internet Explorer, make sure your code provides a backup plan. Write a simple polyfill or use a helper function to mimic URLSearchParams functionality:

function removeParam(paramName) {
  let params = new URLSearchParams(location.search);
  params.delete(paramName);
  return params.toString();
}


Balancing hashes

Don't forget about hash parameters if you're using them. Remove the parameters but keep the hashtags:

let currentHash = window.location.hash;
history.replaceState(null, '', `${location.pathname}?${removeParam('myParam')}${currentHash}`);


Async actions with jQuery

If you swear by jQuery, initiate the URL parameter removal when the document is ready and raring to go.

$(document).ready(function() {
  history.replaceState(null, '', location.pathname);
  // jQuery just loaded. URL parameters are shaking.
});


Avoiding pitfalls and traps

Checking parameter existence

Look before you leap. Check if a parameter exists before trying to remove it:

if (urlParams.has('thirdWheel')) {
  // The talk "We need to remove you, thirdWheel."
}


Robust state management

The state object in pushState or replaceState can store valuable data. Handle this data to avoid losing essential information.

history.pushState({ page: 1 }, 'Title', '?page=1');
// Like packing a suitcase...don't forget anything! 


SEO considerations

Messing with URLs repeatedly can affect SEO rankings. Ensure your URL is both user-friendly and SEO-friendly.