javascript - Add to browser History without changing current URL

Question

I have a 3 step signup process where each step is shown on the page using javascript without a page refresh. What I am trying to do now is add a back reference to what step the user was on so if they click the browser back button they will not lose all of their progress.

So for example, as the user navigates from Step 2 to Step 3 the URL stays at www.example.com. The user then clicks the browser back button. The URL should now be www.example.com?step-2.

I'm thinking that I will somehow need to use the History API to accomplish this but if I use window.history.pushState(null, null, 'www.example.com?step-2'), the current URL would be changed as well.

How would I accomplish adding to the history without changing the current URL?

question from:https://stackoverflow.com/questions/65945865/add-to-browser-history-without-changing-current-url

Answer 1

If your objective is to not change the URL, but to still allow back and forth history state changes, your best bet would be to utilize the window's hashchange event listener. This would of course utilize hash references within the URL, but the base URL won't change:

function locationHashChanged() {
  if (location.hash === '#step-2') {
    // Do something here
  }
}

window.onhashchange = locationHashChanged;

For further info on this, refer to official documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event