Simulate session cookies in mobile sessions?

Question

I discovered to my astonishment at the first glance that my thinking of how session cookies behave on mobile devices is overruled by reality.

On normal desktop browsers the behavior is to store a session cookie as long as the browser session is active. The session should be closed, if the last browser window/process is closed.

Now on mobile devices you hardly ever close a browser app, you just send it to the background.

I discovered on my Sony Xperia Ray with Android 4 that the session cookie is not expired, even if I purge the browser process. But on a Samsung Tablet device it would. I don't know, how iOS devices behave in that way.

This is a problem!? What should I do to work around it?

For now, I decided to let the cookie expire in one day. But I'm not very happy with that.
Should I lower the lifetime? Perhaps to 8 hours?

Answer 1

Would it make sense for you to go the HTML5 way and use sessionStorage?

This way you could be independent of the way different devices handle browser sessions, since HTML5 session storage is per-window, thus it is limited to the lifetime of the browser window.

Basically all mobile devices support sessionStorage (see here) and you could have a framework/plugin like jQuery-Session-Plugin (follow this link) handle the session data for you (and provide a fallback to session cookies for old browsers that don't support sessionStorage).

EDIT: In order to show the behavior of sessionStorage vs. localStorage, I've created a fiddle that (for demonstration purpose) uses sessionStorage for storing the width of a div and localStorage for storing the height of the same div:

var randomWidth,
    randomHeight;
if (!(randomWidth= $.session.get("randomWidth"))) {    // assignment
    randomWidth = Math.random() * 300;
    $.session.set("randomWidth", randomWidth, true);
    console.log("just assigned and stored in sessionStorage: randomWidth: " + randomWidth);
} else {
    console.log("from sessionStorage: randomWidth: " + randomWidth);
}
if (!(randomHeight= $.domain.get("randomHeight"))) {    // assignment
    randomHeight = Math.random() * 300;
    $.domain.set("randomHeight", randomHeight, true);
    console.log("just assigned and stored in localStorage: randomHeight: " + randomHeight);
} else {
    console.log("from localStorage: randomHeight: " + randomHeight);
}
$(".test").css({width: randomWidth, height: randomHeight});

Look at the console. You will see that when you initiate a new session of your client browser, the width will variate while the height will stay the same (because local Storage is per domain).

Here is the link to jsfiddle