Clear forward history on popstate event

Question

I am developing an application which uses views that gets added to the history through

history.pushState() function

The views are different steps in a form where a user is meant to be able to step back to previous steps and make adjustments but not forward without re-posting.

I achieve the back navigation by listening for popstate events and navigating back one step in the invoked function

The problem is that as popstate is called the history forward in the browser becomes clickable for obvious reasons. But as the history forward button also fires a popstate event the result of clicking history forward is that you navigate another step back.

Since I don't want the user to be able to go history forward I would want the forward history to be cleared.

So my question is basically, is there a way to remove forward history as you step back through the browser history?

Answer 1

Check if user is coming back from the next step (step 2), for example you can do this using cookies or localStorage. If he is do a pushState with the current location (step 1). Unfortunately it will add another position in history list for the back button but it will also disable history forward button. Step 2 won't be visible in the history back list. It's not perfect but maybe it's good enough.