I was wondering why you haven’t looked at, or at least mentioned using indexedDb for this?
I have a similar use case for needing to locally cache data, and its nice being able run some simple queries to pull and merge from the local indexedDb.
Just a quick summary of my project. I am creating a system for a local flight training school that has certain features that needed to be offline capable. These would be used in the aircraft while flying, so any data needed in flight would require that to be stored locally, used and perhaps updated in flight, and then sync’d with the server upon re-connection to a WAN.
So I went with a PWA style web app created in Aurelia using a .NET Core WebApi server on Azure. My first iteration is design for full offline support. When the user authenticates I determine what data they can see, load that into the indexedDb, initialize the Aurelia Store to manage current state of objects in the app, but not the data specifically as that is maintained in the indexedDb. I have a check on any router navigation that then checks if online (can access a file on the server successfully to prevent LieFi) and sync any changes available.
In hindsight I think that I should have, and will in the future make some of the functionality online only (admin stuff mainly), but it is working for now for everything.
So I think that state is good for temporary items, or items that are not yet ready to be persisted, but I think that any long term persisted data would be better in the indexedDb in case the user clears cache and the localstorage is wiped(not sure about this, but worst case it would). I do save the state in localstorage on tab closing, and restore on returning to the app for general state, and objects not yet persisted, but its not a significant loss if that gets wiped.
I have a lot of assumptions here, that I hope I am right with. But I am finding the system working very good.
BTW: I use dexie for the indexedDb access.