跨多个浏览器选项卡的 JavaScript 会话管理答案

【问题标题】：JavaScript session management across multiple browser tabs跨多个浏览器选项卡的 JavaScript 会话管理
【发布时间】：2017-12-16 16:25:36
【问题描述】：

我正在尝试在客户端控制 Web 应用程序超时。使用 JavaScript 我可以检测用户是空闲还是活动。因此，如果用户在一段时间内没有进行任何操作，那么我的 JavaScript setTimeout(callback, millisecond) 将被触发。按照这个方法，我可以管理我的应用程序自动注销。

但是当浏览器的多个标签同时查看我的同一个页面时，注销事件不会在多个浏览器标签之间同步。我希望它是同步的。

例如，首先用户使用标签号 1 加载我的网页，然后在超时之前他打开标签号 2 并浏览相同的网页并在标签号 2 处非常积极地使用它。但当时，由于 1 号标签没有主动使用，1 号标签触发了超时。我不想那样。我希望它处于活动状态，因为用户在不同的选项卡上积极使用相同的网页。

因此，只要用户处于活动状态，我就使用htm5 localStorage 来保持/检查不同浏览器选项卡的最大会话时间。

<html>
<head>
    <script type="text/javascript">
        var timeout_time = 5;
        var time_remaining = 0;

        setInterval(function(){
            time_remaining = localStorage.getItem('timeout_time');
            console.log("time_remaining = ", time_remaining);
            if(time_remaining > 1 || time_remaining != null){
                localStorage.setItem('timeout_time', time_remaining - 1000);
            }
        }, 1000);

        function SetTimerForAppSession() {
            onInactive(logout, timeout_time * 1000);
        }

        function logout() {
            console.log('Logout');

            if(localStorage.getItem('timeout_time') <= 0)
            {
                window.location = "//plnkr.co/";
            }
            else
            {
                console.log("Logout.SetTimerForAppSession");
                SetTimerForAppSession();
            }
        }

        function onInactive(callback, millisecond) {
            var wait = setTimeout(callback, millisecond);

            document.onmousemove =
            document.onmousedown =
            document.onmouseup =
            document.onmousewheel =
            document.DOMMouseScroll =
            document.onkeydown =
            document.onkeyup =
            document.ontouchstart =
            document.ontouchmove =
            document.onscroll =
            document.focus = function () {

                // clear
                clearTimeout(wait);
                localStorage.removeItem('timeout_time');

                // reset
                wait = setTimeout(callback, millisecond);
                localStorage.setItem('timeout_time', millisecond)
            };
        }
    </script>
</head>
<body onload="SetTimerForAppSession();" >
    .... keep active so that your session will never be expired. .....
</body>

最后我可以跨不同的浏览器标签管理会话超时。但我认为我的方法不是正确的方法，因为我需要依赖 setInterval 函数。我也担心应用程序的性能。

如果您有更好的解决方案，请告诉我。

Plunker

【问题讨论】：

也可以使用 "storage events" 来跟踪其他窗口中的最后一个活动

标签： javascript performance

【解决方案1】：

这个想法假设您的应用程序将在用户处于活动状态时定期与服务器交互。您可以进行手动注销呼叫和自动注销呼叫。当服务器看到手动注销请求时，它会服从。如果请求是自动注销，则检查该用户是否处于活动状态并决定是否服从该请求。我不会担心一个管理良好的超时会增加任何 CPU 负载。

【讨论】：