JS - window.history - Delete a state

Using the html5 window.history API, I can control the navigation pretty well on my web app.

The app currently has two states: selectDate(1) and enterDetails(2).

When the app loads, I replaceState and set a popState listener:

history.replaceState({stage:"selectDate",...},...);
window.onpopstate = function(event) {
    that.toStage(event.state.stage);
};

When a date is selected and the app moves to stage 2 I push state 2 onto the stack:

history.pushState({stage:"enterDetails",...},...);

This state is replaced anytime details change so they are saved in the history.

There are three ways to leave stage 2:

  • save (ajax submit)
  • cancel
  • back button

The back button is handled by the popstate listener. The cancel button pushes stage 1 so that the user can go back to the details they were entering the back button. These both work well.

The save button should revert back to stage 1 and not allow the user to navigate back to the details page (since they already submitted). Basical, y it should make the history stack be length = 1.

But there doesn't seem to be a history.delete(), or history.merge(). The best I can do is a history.replaceState(stage1) which leaves the history stack as: ["selectDate","selectDate"].

How do I get rid of one layer?

Edit:

Thought of something else, but it doesn't work either.

history.back(); //moves history to the correct position
location.href = "#foo"; // successfully removes ability to go 'forward', 
                       // but also adds another layer to the history stack

This leaves the history stack as ["selectDate","selectDate#foo"].

So, as an alternative, is there a way to remove the 'forward' history without pushing a new state?

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.