CODEWITHSUNDEEP
javascriptgwt
Ikumo
Ikumo

Reputation: 41

Change value in URL without affecting history

I am pretty sure I am failing to find an answer to this just because I am not using the correct terminology when googling.

In my website I want to display some details about the user's state like selections or filters in the URL so it can be copied and sent to a colleague to replicate the state somewhere else. However, I don't want to enter a state in the history for each change to this so that the back buttons and refresh are affected. I want to make it so that if you navigate to a new place within the website or if you press back/forward/refresh in your browser, the extra parameters (to the extent I chose) will be discarded.

Whenever I try to google for this the topics are always "Change url without reloading page" where I want "Change url text superficially without affecting ANY behavior of the history or browser".

I am developing with GWT so I anticipate that a javascript approach will be most appropriate.

Upvotes: 4

Views: 1655

Answers (1)

flobbe9
flobbe9

Reputation: 34

As mentioned in the comments, if you change the url using window.replaceState() instead of something like searchParams.set("key", "value") (for react), then the current history entry will be updated without creating a new one. E.g. to update the search params:

function updateSearchParam(key, value) {
    const url = new URL(window.location.href);
    url.searchParams.set(key, value);

    // Update the URL without adding a new history entry
    window.history.replaceState(null, '', url);
}

// Example usage:
updateQueryParams('age', '40'); // => .../?age=40

This way, navigating to the previous page will not go through each url change.

See MDN Docs: replaceState()

Upvotes: 0

Related Questions