Session Timeout Recovery
It can be difficult for the client to know if the session has timed out on the server. This post describes the use of session storage to save and restore the data on a page input when a session times out.
Let's start with the timeout detection.
On the server side, this tiny piece of code checks if the user is logged in.
<?php
session_start();
header('HTTP/1.1 '.(!empty($_SESSION['logged_in']) ? '204 No content' : '403 Forbidden'));
exit;
The only response is either 204 No content which means the user is logged in, or 403 Forbidden, meaning the user isn't logged in or the session timed out.
On the client side, we'll start with the code that is "pinging" the server and saving the data:
"use strict";
// pingStatus is the session storage key which will contain either SAVED or NOT_SAVED to indicate whether there is session data saved.
var pingStatus = '_$ping_status$_';
var SAVED = 'saved';
var NOT_SAVED = 'not_saved';
// PREFIX is the session prefix key, intended to avoid namespace conflicts between other sessionStorage code
var PREFIX = '__$';
// The values of these types of inputs are not saved - you may want to save hidden inputs depending on how your page is coded
var DONT_SAVE = ["file", "button", "submit", "reset", "hidden"];
// The ping function
function ping(key) {
// key is used to identify the data - it can be any value you would like
// A page name and id work well, that way, if there are multiple instances of the same page in the browser, conflicts should be avoided
PREFIX = key;
// pinger is the variable used to store the interval timer
var pinger;
// doPing pings the server
function doPing() {
var pReq = new XMLHttpRequest();
pReq.addEventListener("load", function () {
var i, items;
// If the server doesn't respond with a 204, consider it a timeout
if (this.status !== 204) {
// Stop pinging
clearInterval(pinger);
// Allow the user to decide whether to save the data or abandon it
if (confirm('Your session timed out. Click OK save the page data or Cancel to discard any data that has not been sent to the server') === true) {
// Loop through all the inputs
items = document.querySelectorAll('input, select, textarea');
for (i = 0; i < items.length; i++) {
// Only save the items that aren't in the DONT_SAVE array
if (DONT_SAVE.indexOf(items[i].type) === -1 && items[i].id !== "") {
// If it isn't a checkbox or radio button - save the value
if (items[i].type !== "checkbox" && items[i].type !== "radio") {
sessionStorage.setItem(PREFIX + items[i].id, items[i].value);
} else {
// If it is a checkbox or radio button - save whether it was checked or not
sessionStorage.setItem(PREFIX + items[i].id, items[i].checked);
}
}
}
// Set the flag to indicate the data was saved
sessionStorage.setItem(pingStatus + key, SAVED);
} else {
// Set the flag to indicate the data has not been saved
sessionStorage.setItem(pingStatus + key, NOT_SAVED);
}
// Location reload is assuming that when the page reloads, the server will redirect to the login page, then to the requested page - which is the current page
location.reload();
}
});
// Issue the ping request
pReq.open("GET", "ping.php");
pReq.setRequestHeader("Accept", "application/json");
pReq.send();
}
// Set the flag to indicate the data has not been saved
sessionStorage.setItem(pingStatus + key, NOT_SAVED);
// Set up to ping every 10 seconds
pinger = setInterval(doPing, 10000);
// Do a first ping, which is effectively on page load. This catches timeouts when the computer had gone to sleep
doPing();
}
The restore code checks to see if the data has been saved and if there is data, allows the user to use it or discard it.
function restore(key) {
var v, i, items;
PREFIX = key;
// If there is data saved for this session
if (sessionStorage.getItem(pingStatus + key) === SAVED) {
// Give the user the opportunity to use it or ignore it
if (confirm('There is data saved for this page, click OK to load it or Cancel to discard it') === true) {
// Get all the inputs
items = document.querySelectorAll('input, select, textarea');
for (i = 0; i < items.length; i++) {
// Ignore the 'DONT_SAVE's and anything that doesn't have an id
if (DONT_SAVE.indexOf(items[i].type) === -1 && items[i].id !== "") {
v = sessionStorage.getItem(PREFIX + items[i].id);
// If there is no data saved for the input, it can't be restored
if (v !== null) {
// If it's not a checkbox or radio button, restore the value
if (items[i].type !== "checkbox" && items[i].type !== "radio") {
// If the value is different than what loaded, restore the value
if (items[i].value !== v) {
items[i].value = v;
}
} else {
// If it is a checkbox or radio button, set the checked state
items[i].checked = v;
}
}
}
}
}
// Indicate the data has not been saved
sessionStorage.setItem(pingStatus + key, NOT_SAVED);
}
}
Finally, to integrate it into the page, include the ping.js file in a script tag, create and save a key, then call restore(key) followed by ping(key).
var key = "page"+someId;restore(key);ping(key);
Print article | This entry was posted by elvis on 07/24/16 at 08:23:00 pm . Follow any responses to this post through RSS 2.0. |