I have sort of a progressive disclosure style page, or a different way of looking at it, tabs. While the content on one tab is displayed, the other tab content is hidden.
<div>
<div class="pg-1">
<div>Content</div>
<div class="next">Next</div>
</div>
<div class="pg-2 hide">
<div>Content</div>
<div class="proceed">Proceed</div>
</div>
</div>
When someone clicks on the next button, it hides tab 1, and shows tab 2. I also set a sessionStorage value so that if someone were to refresh the page, I know what tab this person saw last.
$('.next').on('click',function(){
sessionStorage.setItem('page','2');
$('.pg-2').removeClass('hide');
$('.pg-1').addClass('hide');
});
However, if someone navigates away from the page, I make sure to set the page/tab to #1, so users always see tab 1 when they come back to the page.
window.onhashchange = function(e) {
sessionStorage.setItem('page', '1');
}
My site is setup as a SPA. My tabs are on a page like mysite.com/#mypage
The problem I am running into is when the session timesout. On timeout, someone is sort of redirected to the homepage, so the onhashchange is not changing the page value in sessionStorage. Any thoughts on how I can account for the session timeout scenario?
I thought about adding a condition that says if previous URL is mysite.com/#otherpage, sessionStorage.setItem('page','1'), however document.referrer doesn't show the previous page hash.
Any thoughts?