JS实现页面长时间不操作退出到登录页面的示例代码，

JS实现页面长时间不操作退出到登录页面的示例代码，

目录

• 页面执行
• index.php
•  方法写入
• sessionTimeout.js

页面执行

index.php

1、在head标签中引入jquey和页面长时间不操作的js页面

<script src="./statics/base/js/jquery-1.8.3.min.js"></script>
<script src="./js/sessionTimeout.js"></script>

2、页面底部，在DOM加载完成之后调用初始化函数

<script>
    $(document).ready(function() {
	    sessionTimeout.init();
	});
</script>

 方法写入

sessionTimeout.js

(function (window) {//立即调用的函数表达式
    //设置时间，用户无操作多久后触发登出操作
    // let inactivityTimeout = 30 * 60 * 1000; // 30分钟
    let inactivityTimeout = 5 * 1000; // 5秒钟
    //定义一个变量timer，用于保存setTimeout返回的ID值，以便在需要时清除定时器。
    let timer;
    // 定义一个名为init的常量函数，用于初始化无操作超时功能，包括重置计时器和绑定事件监听器。
    const init = function () {
        resetInactivityTimeout();
        bindEvents();
    };
    // 定义一个名为resetInactivityTimeout的常量函数，用于清除当前计时器并重新设置一个新的计时器，如果inactivityTimeout内没有用户活动，则执行登出操作。
    const resetInactivityTimeout = function () {
        // 清除当前存在的计时器。
        clearTimeout(timer);
        // 设置一个新的计时器，等待inactivityTimeout指定的毫秒数后执行logout函数。
        timer = setTimeout(logout, inactivityTimeout);
    };
    // 定义一个名为bindEvents的常量函数，用于绑定鼠标移动、按键和鼠标点击等事件，当这些事件发生时，调用resetInactivityTimeout函数重置计时器。
    const bindEvents = function () {
        // 监听鼠标移动事件，每当鼠标移动时，重置计时器。
        document.addEventListener('mousemove', resetInactivityTimeout);
        // 监听键盘按键事件，每当用户按下键盘键时，重置计时器。
        document.addEventListener('keydown', resetInactivityTimeout);
        // 监听鼠标点击事件，每当用户点击鼠标时，重置计时器。
        document.addEventListener('mousedown', resetInactivityTimeout);
    };
    // 定义一个名为logout的常量函数，用于执行登出操作。
    const logout = function () {
        // 清除本地存储的信息并跳转到登录页面
        // localStorage.removeItem('access_token');
        // 当调用logout函数时，将页面URL更改为'./Logout.php'，从而实现页面跳转并登出系统。
        window.location.href = './Logout.php';
    };
    // 初始化函数。检查全局window对象上是否存在名为sessionTimeout的属性。如果不存在，则将其定义为一个包含init方法的对象。
    if (typeof window.sessionTimeout === 'undefined') {
        // 将init函数作为一个属性挂载到全局sessionTimeout对象上，使得在各页面中可以通过sessionTimeout.init()来启用无操作超时自动登出功能。
        window.sessionTimeout = {
            init: init
        };
    }
})(window);

到此这篇关于JS实现页面长时间不操作退出到登录页面的文章就介绍到这了,更多相关js长时间不操作退出登录页面内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！

您可能感兴趣的文章:

• vue中js判断长时间不操作界面自动退出登录(推荐)
• JSP实现用户登录、注册和退出功能
• JS 退出系统并跳转到登录界面的实现代码
• JSP中实现系统登录后的退出原理及代码