On mobile, localStorage is erased after a few minutes of doing something else

Question

This problem only happens with my progressive React web app when I run it on my iPhone 5S (iOS 12.5.2) and LG Android phone. It does this with Mobile Chrome and Mobile Safari. Everything works fine on Chrome on my Macbook Pro.

I will have the app open then switch to something else on my phone. If I go right back to it within five or six minutes, the former state is not lost. But if I wait longer, the page reloads as if localStorage has been deleted. The longer I've been away, the longer it takes to restore the app. It had been doing that progressively extending reactivation delay part for a while, but only recently it started to also completely lose what's in localStorage too.

I looked at "Website Data" before and after this happens and saw that the site has about as much data before and after.

I have tried this both with and without using a service worker but I got the same results.

The site is: https://www.stopindoctrination.org

Answer 1

apparently webkit deletes storage older than 7 days

Are you fetching and manually placing data into local storage or are you using the service worker to interupt fetch requests and cache the data?

If you're not already using the service worker I would suggest it.

Answer 2

Related to localStorage cleared on ios apps when device memory becomes low: https://github.com/scottjehl/Device-Bugs/issues/64

Thread states that IOS might clear localStorage data if the device memory is almost full, so that should be something to check, as it could be easily confirmed as a known bug or not.

Otherwise, this might be an ongoing bug with Apples tracking prevention acting up, which only intends to clear after 7 days.

Switching to a more reliable browser storage option like pouchdb which uses IndexedDB and WebSQL under the hood, rather than localStorage, might be a solution if the other concerns don't lead to a fix.