Question

我试图控制客户端的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

Answer 1

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

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

1 个答案: