86

I'm developing a webpage where depending on the next or back actions I do the correspondent animation, the problem comes when using the pushstate. When I receive the event how do I know if the user clicked back or forward history buttons using the Pushstate API?, or do I have to implement something myself?

3
  • The popstate event says "please change to this state". It looks as if it assumes that you know what state you're currently in and therefore what you need to do to change state.
    – Neil
    Jan 24, 2012 at 0:03
  • The problem is that the history is a stack, so if I have a list and I go forward, forward, forward, back, forward, back, forward, and the list is: [1,2,3,4,5], the history will be: [1,2,3,4,3,4,3,4]. In numbers is easy, but with urls is not that easy to know which url is the next, and which the previous.
    – Davsket
    Jan 24, 2012 at 0:16
  • bennedich's comment below helped me a lot. It might be good to accept it so it more effectively help others as well. Aug 16, 2013 at 13:53

2 Answers 2

76

You must implement it yourself which is quite easy.

  • When invoking pushState give the data object a unique incrementing id (uid).
  • When onpopstate handler is invoked; check the state uid against a persistent variable containing the last state uid.
  • Update the persistent variable with the current state uid.
  • Do different actions depending on if state uid was greater or less than last state uid.
5
  • 18
    This works well when the page/view hierarchy is clearly defined, and it's always true that a certain page comes after another. When the navigation can be more dynamic, you can't rely on an incrementing UID. I've solved this by using sessionStorage to maintain a stack of the last X pages. Then, on a popstate event, you can check the stack from sessionStorage to see if the new page URL is the same as the URL of the N-2 page. Use sessionStorage instead of a normal variable, so this is persisted between page boundaries. Oct 31, 2013 at 19:55
  • 25
    @frontendbeauty I think you should post your proposal as the answer with code snippet.
    – andilabs
    Sep 30, 2014 at 8:47
  • 2
    in addition, instead of checking if the value is greater/lesser, you can write a state change manager that checks the id to see what the current state is and what state it's moving to, then do the corresponding animation Apr 13, 2015 at 8:09
  • If it's so easy, why didn't you write the implementation? I simply can't see how to make it bugless for any possible use case. No matter where I will keep the current state, I can figure out how to abuse it.
    – Atomosk
    Feb 17, 2018 at 6:00
  • 2
    @frontendbeauty what if you are on page you are in the middle page b and your stack looks like this [a, b, a] you get popstate event, how do you know if it was back or forward? May 28, 2021 at 15:40
12

This answer should work with a single page push-state app, or a multi-page app, or a combination of the two. (Corrected to fix the History.length bug addressed in Mesqualito’s comment.)

How it works

We can easily listen for new entries to the history stack. We know that for each new entry, the specification requires the browser to:

  1. “Remove all the entries in the browsing context’s session history after the current entry”
  2. “Append a new entry at the end”

At the moment of entry, therefore:

new entry position = position last shown + 1

The solution then is:

  1. Stamp each history entry with its own position in the stack
  2. Keep track in the session store of the position last shown
  3. Discover the direction of travel by comparing the two

Example code

function reorient() // After travelling in the history stack
{
    const positionLastShown = Number( // If none, then zero
      sessionStorage.getItem( 'positionLastShown' ));
    let position = history.state; // Absolute position in stack
    if( position === null ) // Meaning a new entry on the stack
    {
        position = positionLastShown + 1; // Top of stack

        // (1) Stamp the entry with its own position in the stack
        history.replaceState( position, /*no title*/'' );
    }

    // (2) Keep track of the last position shown
    sessionStorage.setItem( 'positionLastShown', String(position) );

    // (3) Discover the direction of travel by comparing the two
    const direction = Math.sign( position - positionLastShown );
    console.log( 'Travel direction is ' + direction );
      // One of backward (-1), reload (0) and forward (1)
}

addEventListener( 'pageshow', reorient );
addEventListener( 'popstate', reorient ); // Travel in same page

See also a live copy of the code.

Limitation

This solution ignores the history entries of external pages, foreign to the application, as though the user had never visited them. It calculates travel direction only in relation to the last shown application page, regardless of any external page visited in between. If you expect the user to push foreign entries onto the stack (see Atomosk’s comment), then you might need a workaround.

8
  • Do some navigation on your site, open an external link, press browser back button twice, long press browser forward button and pick external site session storage, press back. Maybe I'm way too catious :). Also I think your function can be replaced with const direction = Math.sign(history.length - (sessionStorage.getItem('stateLastShown') || 0)); sessionStorage.setItem('stateLastShown', history.length); since you always put history.length in history state.
    – Atomosk
    Mar 19, 2018 at 16:25
  • @Atomosk (1) You’re right, external links aren’t handled properly. I added a warning about that. (2) I think your pruned code will fail. History.length determines the position only for a new entry to the stack. You also need code to handle the other case, which is a revisited entry. Mar 20, 2018 at 20:28
  • 6
    Yeah you right. I'll never get used to how poor frontend apis are. Cheking how far I can go with back/forward button should be a single line, but somebody decided otherwise.
    – Atomosk
    Mar 21, 2018 at 3:21
  • 2
    Browser back/forward history has a fixed limit, in Chrome its 50. When you reach that limit history.length will always yield the same number (50 in my case) thus making this solution to always return 0 as direction, because all state entries would have identical position.
    – Mesqalito
    Jan 28, 2019 at 15:37
  • @Mesqalito You're right, the browser limits on History.length make it unreliable. I changed the answer to use session variable positionLastShown instead. May 9, 2019 at 9:24

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.