I know this has a great chance of being marked as duplicate, but couldn't find exactly what I'm looking for

This is a common problem and I'm sure it has some well defined best practice solution

Background

1. A single page SaaS app, has lot's of drag and drop, user can
   interact with it without much server communication for periods of
   time

2. Server session only holds user object, using a non persistent session cookie

3. Session expires on the server after X hours

4. Some things are loaded only during log-in

Problem

1. User works on the app, when done, user doesn't log out, just keeps the browser open
2. User comes back after more than X hours (session is invalidated on server)
3. User interacts with the app without needing a server connection (drags and drops things, text edits…)
4. Only on the next server interaction (let's assume there is no auto save) user is thrown to login page and loses some of their work

Possible solutions

Here are some solutions I have in mind, would like to hear if there are any others, and if there is anything fundamentally wrong with any of them.

1. Never log the user out

• How? either keep a long session, keep a persistent cookie, or javaScript "keep alive" ping
• Pros: user doesn't need to worry about anything, fixes the problem for them
• Cons: not PCI compliant, not secure, and needs development changes, e.g. things loaded to session only on user log in need to move to either a pub sub model (listening on event changes) or have cache timeout.

2. Local Storage

• How? use new local storage to temporarily store state if logged out, redirect to login page, persist once logged in
• Pros: Also base for "work offline" support, not just handling session timeout
• Cons: harder to implement, need to do state merge of data tree, not all browsers support

3. Auto save

Every user action that changes the model, should persist immediately (or via some sort of a client side queue), e.g. if they check a checkbox, change a text field, or drag and drop something, once they are done, persist the changes.

• How? Use an MV** framework (Backbone.js / Knockout.js / Ember.js / Angular.js etc) to bind the model, and persist on changes.
• Pros: Seems like a clean solution, session is active as long as user is active, no client side work is done without persisting it.
• Cons: The last action user is doing after a session timeout is lost.

4. Log the user out after session expires

this can have several approaches

1. Ask the server "has session expired" – this is a bit of a catch 22 / Schrodinger's cat, as the mere question to the server extends the session (restarts the timeout),

   • How? Either have a server that supports such question (I don't know of any, but I come form Java land) or, one can just keep a table of session IDs, and last access time manually, and ask the server by passing the session ID as a parameter instead of the cookie, I'm not sure if this is even possible, but it sounds dangerous, insecure and bad design whatsoever.login page, persist once logged in
   • Pros: If there was such native support in servers, sounds like a clean, legitimate question (asking if user X still has a session or not without renewing it if they do)
   • Cons: If the server doesn't support it (and again, I don't know if any server or framework has this functionality) then the workaround has huge security risks potentially.

2. One workaround I've heard is have a short session on the server side, and a keep alive client side ping, that has a maximum number of pings

   • How? Short session on server, client pings every sessionTimeOut/2, has max retries of Y.
   • Pros: Kind of fixes the problem, quick and dirty
   • Cons: Feels like a hack, handling the session renewal yourself instead of letting the server do it

3. Client side timer

   • How? Have a timer on the client side and sync it with the server one by restarting it on every request to be equal to the max server session timeout minus some padding, after user is not sending any request to the server, UI shows a "sessions is about to time out, do you want to continue?" (like you have on online banking )

   • Pros: Fixes the problem

   • Cons: Can't think of any except the need to make sure the sync works

The Question

I'm probably missing something in the above analysis, might have some silly mistakes, and I would like your help to correct them. What other solutions I can have for this?