I have been working on a site that uses AJAX and the browser history API for navigation.
I have been able to get navigation to work properly for back/forward button but the problem arises after clicking the refresh button.
Since I am storing a default state and page title in which to refer to when the popstate event is null, it is being over written on a page reload.
For example, let's say my history stack looks like:
[Index, page 1, page 2]
On page 2 if I reload, the default state becomes page 2. So, if I were to navigate back it would end up being doing:
page 2 -> page 1 -> page 2
Since my pop stand handler is set to go to the default page when the state is null.
I'm sure that others have ran in to this problem but I haven't found any clear solutions. Most tutorials leave the framework for back/forward and never mention the problems caused by a refresh.
I'm not sure what a good solution would be for this. Any ideas?
In case anyone else stumbles on this, I ended up solving this problem with replaceState.
Basically just replace the state with the state of the initial page load. Everything should then work correctly without having to deal with the popState event being null.