-
-
Save simonw/9445b8c24ddfcbb856ec to your computer and use it in GitHub Desktop.
| history.replaceState && history.replaceState( | |
| null, '', location.pathname + location.search.replace(/[\?&]message=[^&]+/, '').replace(/^&/, '?') | |
| ); |
| When a form is submitted, best practice is to use redirect-after-post - you | |
| POST to a specific URL, that URL performs an action and then HTTP redirects | |
| the user to a confirmation page. | |
| This helps avoid unexpected behaviour with the browser reload and back | |
| buttons. | |
| Using this technique does have one downside: since you have redirected away | |
| from the page that performed the action, how do you know what kind of | |
| confirmation message to display to the user? | |
| There are two common ways of handing this: | |
| 1. Using a "flash message" in a temporary cookie. This works well, but can | |
| behave strangely when multiple tabs are involved. | |
| 2. Adding a ?message=MESSAGE-IDENTIFIER parameter to the redirect URL. | |
| This is reliable, but ugly. We don't want users to bookmark these URLs | |
| or share them with each other, as that will cause an incorrect message | |
| to be displayed. | |
| This JavaScript one-liner uses the HTML5 history API to improve the second | |
| approach, by removing the extra querystring paramater from the URL once the | |
| page has loaded, without causing the browser to reload the page. |
There's a small bug in this gist. It removes the hash of the URL.
You should include it:
history.replaceState && history.replaceState(
null, '', location.pathname + location.search.replace(/[\?&]message=[^&]+/, '').replace(/^&/, '?') + location.hash
);
thanks! an alternative option
const url = new URL(window.location.href)
const params = new URLSearchParams(url.search.slice(1))
params.delete('message')
window.history.replaceState(
{},
'',
`${window.location.pathname}?${params}${window.location.hash}`,
)
You can use location.href that contains full url, so, you definitely don't lose anything
history.replaceState(null, null, location.href.replace(/[\?&]message=[^&]+/, '').replace(/^&/, '?')But in real-life I would like to use something like:
const url = new URL(location);
url.searchParams.delete('message');
history.replaceState(null, null, url)
The above history.replaceState doesn't seem to work when you remove the first param. the & doesn't get replaced with the ? as you'd expect, probably because the & isn't at the beginning of the string. a slight edit seems to work
history.replaceState(null, null, location.protocol + '//' + location.host + location.pathname + location.search.replace(/[?&]message=[^&]+/, '').replace(/^&/, '?'));
put into a function to make it more convenient
function removeURLParam(param) {
param = param != 'undefined' ? param : '';
history.replaceState(null, null, location.protocol + '//' + location.host + location.pathname + location.search.replace(/[\?&]param=[^&]+/, '').replace(/^&/, '?'));
}
Did you try "real-life" version?
const url = new URL(location);
url.searchParams.delete('message');
history.replaceState(null, null, url)
we still have people using IE and searchParams doesn;t work in IE
@DimaGashko Thanks mate :)
thanks! ❤️