Session Timeout Warning Plugin With jQuery - timeoutWarning
File Size: | 4.54 KB |
---|---|
Views Total: | 1881 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
This is a jQuery and cookies-based session timeout warning plugin that displays a warning message when the session is about to expire and allows your users to log out or keep the session alive. Requires the js.cookie library to handle browser cookies.
How to use it:
1. Load the needed jQuery and js.cookie libraries in the html file.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
2. In this example, we're going to use the Bootbox plugin to provide the session timeout alert (OPTIONAL).
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
3. Load the jQuery timeoutWarning plugin's script after jQuery.
<script src="jquery.timeoutWarning.js"></script>
4. Initialize the plugin and config the Session Timeout Warning with the following options.
$.timeoutWarning({ // cookie name where the session expiration is stored cookieName : 'sessionExpiresOn', // called when the session expires sessionExpired : reload, // time to wait after the session expires before calling the `sessionExpired` callback function timeSpanAfterExpiration : 2000, // url to send the ping to remain in the session pingUrl : '/', // how long the session lasts sessionTimeout : 15 * 60 * 1000, // time before the session expires to display the warning message notifyBefore : 30 * 1000, // schedule the session timeout warning when the `init` method is executed enabled : true, // reset the session timeout when the ajaxComplete event is fired resetOnAjaxComplete : true, // alert function alert : bootboxAlert || alert, // custom warning message warningMessage : 'For your protection, you are about to be automatically logged out.' + (bootboxAlert ? '<br>' : '\n') + 'If you would like to remain in the session, click OK below.' });
This awesome jQuery plugin is developed by aprofetb. For more Advanced Usages, please check the demo page or visit the official website.