Change the URL in the browser without loading the new page using JavaScript

fragment-identifier, hashchange, html5-history, javascript, url

Solution

With HTML 5, use the `history.pushState` function. As an example:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

and a href:

<a href="#" id='click'>Click to change url to bar.html</a>

If you want to change the URL without adding an entry to the back button list, use `history.replaceState` instead.

Problem

How would I have a JavaScript action that may have some effects on the current page but would also change the URL in the browser so if the user hits reload or bookmark, then the new URL is used? It would also be nice if the back button would reload the original URL. I am trying to record JavaScript state in the URL.

Original source