JS - window history - Delete a state

Question

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

User · Answer

There is no way to delete or read the past history.

You could try going around it by emulating history in your own memory and calling history.pushState everytime window popstate event is emitted (which is proposed by the currently accepted Mike's answer), but it has a lot of disadvantages that will result in even worse UX than not supporting the browser history at all in your dynamic web app, because:

popstate event can happen when user goes back ~2-3 states to the past
popstate event can happen when user goes forward

So even if you try going around it by building virtual history, it's very likely that it can also lead into a situation where you have blank history states (to which going back/forward does nothing), or where that going back/forward skips some of your history states totally.

User · Answer

You may have moved on by now  but    as far as I know there s no way to delete a history entry  or state    One option I ve been looking into is to handle the history yourself in JavaScript and use the window history object as a carrier of sorts   Basically  when the page first loads you create your custom history object  we ll go with an array here  but use whatever makes sense for your situation   then do your initial pushState   I would pass your custom history object as the state object  as it may come in handy if you also need to handle users navigating away from your app and coming back later   var myHistory        function pageLoad         window history pushState myHistory    lt name gt      lt url gt            Load page data      Now when you navigate  you add to your own history object  or don t - the history is now in your hands   and use replaceState to keep the browser out of the loop   function nav to details         myHistory push  page im on now        window history replaceState myHistory    lt name gt      lt url gt            Load page data      When the user navigates backwards  they ll be hitting your  base  state  your state object will be null  and you can handle the navigation according to your custom history object   Afterward  you do another pushState   function on popState            Note that some browsers fire popState on initial load         so you should check your state object and handle things accordingly          I did not do that in these examples        if  myHistory length  gt  0            var pg   myHistory pop            window history pushState myHistory    lt name gt      lt url gt                Load page data for  pg         else             No  history  - let them exit or keep them in the app            The user will never be able to navigate forward using their browser buttons because they are always on the newest page   From the browser s perspective  every time they go  back   they ve immediately pushed forward again   From the user s perspective  they re able to navigate backwards through the pages but not forward  basically simulating the smartphone  page stack  model    From the developer s perspective  you now have a high level of control over how the user navigates through your application  while still allowing them to use the familiar navigation buttons on their browser   You can add remove items from anywhere in the history chain as you please   If you use objects in your history array  you can track extra information about the pages as well  like field contents and whatnot    If you need to handle user-initiated navigation  like the user changing the URL in a hash-based navigation scheme   then you might use a slightly different approach like     var myHistory        function pageLoad            When the user first hits your page           Check the state to see what s going on       if  window history state     null               If the state is null  this is a NEW navigation                the user has navigated to your page directly  not using back forward               First we establish a  back  page to catch backward navigation          window history replaceState                isBackPage  true                  lt back gt                  lt back gt                          Then push an  app  page on top of that - this is where the user will sit              As browsers vary  it might be safer to put this in a short setTimeout           window history pushState                isBackPage  false                  lt name gt                  lt url gt                          We also need to start our history tracking          myHistory push   lt whatever gt              return                If the state is NOT null  then the user is returning to our app via history navigation           Load up the page based on the last entry of myHistory here       if  window history state isBackPage               If the user came into our app via the back page                 you can either push them forward one more step or just use pushState as above           window history go 1              or window history pushState   isBackPage  false      lt name gt      lt url gt                setTimeout function                Add our popstate event listener - doing it here should remove                the issue of dealing with the browser firing it on initial page load          window addEventListener  popstate   on popstate          100      function on popstate e        if  e state     null               If there s no state at all  then the user must have navigated to a new hash               lt Look at what they ve done  maybe by reading the hash from the URL gt              lt Change load the new page and push it onto the myHistory stack gt              lt Alternatively  ignore their navigation attempt by NOT loading anything new or adding to myHistory gt              Undo what they ve done  as far as navigation  by kicking them backwards to the  app  page         window history go -1               Optionally  you can throw another replaceState in here  e g  if you want to change the visible URL             This would also prevent them from using the  forward  button to return to the new hash          window history replaceState                isBackPage  false                  lt new name gt                  lt new url gt                    else           if  e state isBackPage                   If there is state and it s the  back  page                 if  myHistory length  gt  0                       Pull load the page from our custom history                    var pg   myHistory pop                        lt load render whatever gt                      And push them to our  app  page again                 window history pushState                        isBackPage  false                          lt name gt                          lt url gt                                    else                      No more history - let them exit or keep them in the app                                      Implied  else  here - if there is state and it s NOT the  back  page                then we can ignore it since we re already on the page we want                  This is the case when we push the user back with window history go -1  above

[javascript] JS - window.history - Delete a state

Examples related to javascript

Examples related to html

Examples related to browser-history