I have a reusable query that pulls a data 'collection' from Google Firestore, and then stores that data set in localStorage along with the time it was last synced.
When I run this query across 3 collections I am seeing the first two are stored in localStorage exactly as expected and the third collection is not stored at all.
When I aggressively console.log() this it looks like the JSON.stringify payload for the third collection is roughly 4mb in size, and I'm wondering if this is exceeding a size limit for localStorage (I believe 5mb total is roughly the limitation) and therefor not being stored.
I'm able to reduce the payload size by removing some unnecessary data before storing it, but before going down this path I wanted to double check this might actually be the issue and there isn't something else I'm not aware of?
Ran only the query that fetches the third collection
localStorage working as expected and shows the third collection (4.4mb size)
Ran the "fetchAll" query which fetches all 3 collections in order and notice that now the localStorage is only storing the data from the first fetch ran (862kb) as well as the data from the large payload run previously.
Looks like this is most likely related to a size issue as the request to store data which would push the localStorage over 5mb is ignored and no data is stored (no console error is fired either).
The size of local storage is actually entirely dependent on your browser, but it seems like it varies from 2MB-10MB. I believe the limit on Chrome is 5MB.
What is your use case for localStorage? Could you use temporary state instead?