JS實現(xiàn)頁面長時間不操作退出到登錄頁面的示例代碼
頁面執(zhí)行
index.php
1、在head標(biāo)簽中引入jquey和頁面長時間不操作的js頁面
<script src="./statics/base/js/jquery-1.8.3.min.js"></script> <script src="./js/sessionTimeout.js"></script>
2、頁面底部,在DOM加載完成之后調(diào)用初始化函數(shù)
<script>
$(document).ready(function() {
sessionTimeout.init();
});
</script>方法寫入
sessionTimeout.js
(function (window) {//立即調(diào)用的函數(shù)表達式
//設(shè)置時間,用戶無操作多久后觸發(fā)登出操作
// let inactivityTimeout = 30 * 60 * 1000; // 30分鐘
let inactivityTimeout = 5 * 1000; // 5秒鐘
//定義一個變量timer,用于保存setTimeout返回的ID值,以便在需要時清除定時器。
let timer;
// 定義一個名為init的常量函數(shù),用于初始化無操作超時功能,包括重置計時器和綁定事件監(jiān)聽器。
const init = function () {
resetInactivityTimeout();
bindEvents();
};
// 定義一個名為resetInactivityTimeout的常量函數(shù),用于清除當(dāng)前計時器并重新設(shè)置一個新的計時器,如果inactivityTimeout內(nèi)沒有用戶活動,則執(zhí)行登出操作。
const resetInactivityTimeout = function () {
// 清除當(dāng)前存在的計時器。
clearTimeout(timer);
// 設(shè)置一個新的計時器,等待inactivityTimeout指定的毫秒數(shù)后執(zhí)行l(wèi)ogout函數(shù)。
timer = setTimeout(logout, inactivityTimeout);
};
// 定義一個名為bindEvents的常量函數(shù),用于綁定鼠標(biāo)移動、按鍵和鼠標(biāo)點擊等事件,當(dāng)這些事件發(fā)生時,調(diào)用resetInactivityTimeout函數(shù)重置計時器。
const bindEvents = function () {
// 監(jiān)聽鼠標(biāo)移動事件,每當(dāng)鼠標(biāo)移動時,重置計時器。
document.addEventListener('mousemove', resetInactivityTimeout);
// 監(jiān)聽鍵盤按鍵事件,每當(dāng)用戶按下鍵盤鍵時,重置計時器。
document.addEventListener('keydown', resetInactivityTimeout);
// 監(jiān)聽鼠標(biāo)點擊事件,每當(dāng)用戶點擊鼠標(biāo)時,重置計時器。
document.addEventListener('mousedown', resetInactivityTimeout);
};
// 定義一個名為logout的常量函數(shù),用于執(zhí)行登出操作。
const logout = function () {
// 清除本地存儲的信息并跳轉(zhuǎn)到登錄頁面
// localStorage.removeItem('access_token');
// 當(dāng)調(diào)用logout函數(shù)時,將頁面URL更改為'./Logout.php',從而實現(xiàn)頁面跳轉(zhuǎn)并登出系統(tǒng)。
window.location.href = './Logout.php';
};
// 初始化函數(shù)。檢查全局window對象上是否存在名為sessionTimeout的屬性。如果不存在,則將其定義為一個包含init方法的對象。
if (typeof window.sessionTimeout === 'undefined') {
// 將init函數(shù)作為一個屬性掛載到全局sessionTimeout對象上,使得在各頁面中可以通過sessionTimeout.init()來啟用無操作超時自動登出功能。
window.sessionTimeout = {
init: init
};
}
})(window);到此這篇關(guān)于JS實現(xiàn)頁面長時間不操作退出到登錄頁面的文章就介紹到這了,更多相關(guān)js長時間不操作退出登錄頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
layer iframe 設(shè)置關(guān)閉按鈕的方法
今天小編就為大家分享一篇layer iframe 設(shè)置關(guān)閉按鈕的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
chart.js實現(xiàn)動態(tài)網(wǎng)頁顯示拆線圖的效果
本文主要介紹了chart.js實現(xiàn)動態(tài)網(wǎng)頁顯示拆線圖的效果,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
JavaScript自定義localStorage監(jiān)聽事件的解決方法
在項目開發(fā)過程中,發(fā)現(xiàn)有很多時候進行l(wèi)ocalStorage.setItem()操作設(shè)置本地存儲后,頁面必須刷新才能夠獲取到存儲數(shù)據(jù),為了解決這個問題,就必須要用到自定義localStorage監(jiān)聽事件了,所以本文給大家介紹了自定義localStorage監(jiān)聽事件,需要的朋友可以參考下2024-10-10
關(guān)于在IE下的一個安全BUG --可用于跟蹤用戶的系統(tǒng)鼠標(biāo)位置
本篇文章小編將為大家介紹,關(guān)于在IE下的一個安全BUG --可用于跟蹤用戶的系統(tǒng)鼠標(biāo)位置。需要的朋友可以參考一下2013-04-04

