跟踪会话超时的“选项卡”

问：

我有一种渐进式披露风格的页面，或者一种不同的查看方式，标签。当一个选项卡上的内容显示时，另一个选项卡上的内容是隐藏的。

<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>

当有人单击下一个按钮时，它会隐藏选项卡 1，并显示选项卡 2。我还设置了一个 sessionStorage 值，以便如果有人要刷新页面，我知道这个人最后看到的选项卡。

 $('.next').on('click',function(){
        sessionStorage.setItem('page','2');
        $('.pg-2').removeClass('hide');
        $('.pg-1').addClass('hide');
    });

但是，如果有人离开页面，我确保将页面/选项卡设置为#1，以便用户在返回页面时始终看到选项卡 1。

window.onhashchange = function(e) {
        sessionStorage.setItem('page', '1');
}

我的网站设置为 SPA。 我的选项卡位于类似 mysite.com/#mypage

我遇到的问题是会话超时时。在超时时，有人被重定向到主页，因此 onhashchange 不会更改 sessionStorage 中的页面值。关于如何解释会话超时情况的任何想法？

我想添加一个条件，说明如果 mysite.com/#otherpage 上一个 URL，则 sessionStorage.setItem（'page'，'1'），但是 document.referrer 不显示上一页哈希值。

有什么想法吗？