JS实现页面长时间不操作退出到登录页面的示例代码
更新时间:2024年03月28日 11:35:52 作者:二十五号底片~
这篇文章主要介绍了JS实现页面长时间不操作退出到登录页面的示例代码,通过在head标签中引入jquey和页面长时间不操作的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长时间不操作退出登录页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
JS中confirm,alert,prompt函数使用区别分析
JS中confirm,alert,prompt函数使用区别分析,需要的朋友可以参考下。2010-04-04JavaScript中轻松获取页面参数值的N种方法(含代码示例)
本文旨在深入浅出地揭示如何在JavaScript中巧妙提取那些隐藏在URL背后的宝贵信息,从基础方法到高级技巧,一网打尽,无论你是编程界的菜鸟还是久经沙场的老将,这里都有值得你品鉴的“珍馐”,需要的朋友可以参考下2024-06-06
最新评论