How to handle session timeouts as a user is saving a form?

Question

Our system has a one hour session length. Occasionally this will expire just before a user presses a 'Save' button on a form. When the session times out, they get kicked back to the log in page and their data is lost. This is obviously bad.

I'm trying to think of a better way to handle this situation. Here's what I've come up with:

1. Start a 55 minute timer in JavaScript on every page load. When it runs out, pop up a message saying "Your session is about to expire, click here if you're alive".
   • Clicking the link would send an AJAX request back to the server to reset the session
   • What if they don't click the link in the next 5 minutes because they've legitimately had to step away from their computer for a minute, but still have a massive form in the works?
     • Poll the server every 30 seconds or so to find out when exactly their session has expired, and then display a login screen in a popup when it has
2. Let the session expire. Copy the POST data somewhere safe (where??). When they try saving the form, they will get kicked to the login form as usual. After a successful login, re-POST the data to the proper location.

How do others deal with this situation? What's the best/easiest approach?

Answer 1

Ok. Besides what people say things like "if the user spends more than 1 hour on the form there is something wrong with the form" or "if the user stays idle for that long, it's their problem, just throw them back to login page", we live in a real world with real people and time is money. Let's say you run an online store and the user has a put a $10,000 worth in their shopping cart, their phone rings and their girlfriend talks for 1 hour... Let's say your form is a textarea where the user decides to write their entire life... Let's say your app is a webmail. The email body is a form, right? We don't want the user to lose an email that they spent 2 hours writing to their loved ones or to an important customer, we save a draft! There are many different possibilities that would justify timer, storing data and pinging the server.

If you are on a time/money critical form page, do not hesitate to refresh the server and keep the session alive. Monitor a few events, like keypress, clicks etc. This will refresh the session in a legitimate way, as long as it gives a clue that the user is there.

• Use browser events to keep the session alive even before the form is submitted
• If the session is about to expire, save as a draft.
• If the session is expired, use a lightbox to get credentials again.

Answer 2

Pretty old question, but I'm just gonna drop this here for future reference.

Best idea would be to use a javascript library to save to your browser's local storage. Enter Sisyphus.js. Just initialize it on a form and all the contents that have not been submitted will be saved and restored.

Best feature? Works with all types of forms, checkboxes, selects and all other classic html input types.