sessionStorage cleaned up unexpectedly on Android

Question

I have a website which saves a stringified JavaScript object into the sessionStorage. It works well on desktop browsers - data survives over page reloads as per described on MDN.

On Android phones, it is not uncommon that a tab is reloaded when user switches back from another tab or when the browser is brought back from background to foreground, and I expect the sessionStorage will persist. This doesn't however seem to be the case. The sessionStorage is gone missing, as if a new session is created.

I have thought of using localStorage instead, which will not expire even if the session is closed. It doesn't really sort out all my problems though - as I expect a user can open it multiple times on multiple tabs, and do different things on each of them.

So my questions are:

1. Is the sessionStorage behavior described above as expected? If not, what can I do to rectify it?
2. If the behavior is as expected, and I have to rely on localStorage, how can I identify the object stored for each individual tab?

Thanks in advance for your help!

Centenary

Hi CLDev, how is you sessionStorage set? I used the unbeforeunload event to save data to the sessionStorage. This work on mobile (but maybe to all) when you close the page or go to another page. But when the user goes to another tab and does not open the webbrowser tab for a while the page will be reloaded when the tab is reopened, but the beforeunload is never fired. I am now using: pagehide and unload as well to set the session. It seems to be working for now. – Lightsome

Answer 1

As others commented, SessionStorage is temporary by design. Mobile browser lifecycle is highly geared towards reducing resource usage and tabs are teardown more aggressively.

To workaround this issue, you can push a random tab ID to the URL and then prefix all LocalStorage keys with this ID. When tab is refreshed you simply read the tab ID from the URL and use it for accessing data in LocalStorage.

LocalStorage has a very simple API, so you could write a wrapper hiding the key prefixing away from your other code.

Latreese

Any source citation for "Mobile browser lifecycle is highly geared towards reducing resource usage and tabs are teardown more aggressively." and is thus responsible for unexpectedly (or expectingly under certain conditions unknown to me) clearing sessionStorage? I have been unable to find it for any of the popular mobile browsers (Android Chrome, iOS Safari, iOS Chrome, Samsung Mobile Browser, etc.). – Restrain

SessionStorage should only be cleared if browser tab is unloaded from device memory. There are two aspects to this: Chrome browser can be killed by Android OS while app is not being used, secondly Chrome browser has its own memory management and can decide to unload/suspend tabs. – Latreese

Answer 2

Yes, that is how sessionStorage works. The behavior is expected.

sessionStorage is unique per tab. If the user closes the tab the sessionStorage gets deleted.That is, the session storage is saved only as long as user stays on the tab.

Whatever you store in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site.

So, yes, it'd be better to use localStorage and clear it out at the end of the session.

Honewort

I can understand the removal of sessionStorage if user closes the tab. However, for the scenario I described, the user doesn't actually close the tab. He/she just switches to another tab, or send the browser to background, then later on come back. On desktop environment, I'm sure neither of these operations will cause the sessionStorage to be cleaned up; while on mobile the behavior seems to be different. – Centenary

The localStorage solution will work if user brings up only one instance of my website. If my website is opened multiple times on multiple tabs, what is the best approach to uniquely identify each of them and bring back the respective stored object? – Centenary

I think I have the same issue, did you manage to get a fix for it? – Lightsome