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

2024-04-18 0 897
目录
  • 页面执行
    • 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长时间不操作退出登录页面内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript JS实现页面长时间不操作退出到登录页面的示例代码 https://www.u-9.cn/biancheng/javascript/186902.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务