Browser appears to be randomly losing localStorage

Question

My angular front-end stores an object in localStorage, and we've been having issues where the object will randomly just no longer exist, with no apparent errors throwing, so I added code to create another localStorage object at any place in my code that could possibly cause the localStorage object to be removed, and that has pointed me to a function in my execution guard where it hits a catchError() that occurs because the storage object just no longer exists, but none of my codes methods that could destroy said storage object had be called. This leads me to a few questions.

My key:value's value that is getting destroyed looks like this, which is nothing fancy:

{
    "companyId": "someUUID",
    "branchId": "someUUID",
    "kioskId": "someUUID",
    "browserId": "someUUID",
    "kioskType": "KIOSK"
}

1. What could possibly be destroying my object(There's roughly 10 total keys stored, only one seems to be getting deleted)

2. Is there a way to audit chrome's localStorage history to see what has happened?

3. Is there a better way to store long-term data that needs to be available on the front-end without communication to the backend then localStorage?

Answer 1

Is your localStorage losing data on page load or during the execution of your program? If you test in incognito mode your localStorage will be cleared on page load. Also if the user clears their history this would clear their localStorage.

Ideally, if nothing is calling localStorage.clear() or localStorage.removeItem('myItem') then the item should not be removed. Do a project search on 'removeItem' to verify your entires are not being removed. If only one of your many items in localStorage is being deleted then something in your program is likely the culprit.

Finally, most browsers have a limited localStorage size of 2.5MB to 10MB. IndexDB is another solution for structured data. Again, there will be a limit. Once you have reached your limit, the first set of data entered may be cleared out to push in the most recent data. I found this out the hard way while working with Service Workers once I approached the 2GB/site capacity. At about 1.8GB, the round of downloaded files started to go missing yet the most recent downloaded files were intact. There was no warning as to when/why this occurred only through thorough testing did I notice this. In your case, if the data is exceptionally small I doubt this is the issue.