localForage VS pinia-plugin-persistedstate

Not really an answer but have you looked into https://github.com/localForage/localForage

I may not be pointing you in the right direction but, please read about [IndexDB storage](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB\_API) method and packages like [localForage](https://localforage.github.io/localForage/) that use it under the hood.

LocalForage: this is a wrapper around IndexedDB, WebSQL, LocalStorage, and SessionStorage with a way to define more interfaces (called drivers) *for additional storage solutions. It does a great job handling all your serialization needs, it is **asynchronous **and handles a large set of data types. Its **API resembles Web Storage API* and it is ridiculously simple to learn.

Depending on what kind of storage requirements you have, LocalForage might be a good fit. It provides a unified API to access WebSQL, indexedDB or localStorage.

I find localForage is pretty helpful for this stuff https://github.com/localForage/localForage

localForage (https://localforage.github.io/localForage/) mirrors localStorage syntax, but uses IndexedDB in the background. If that's not supported, it uses WebSQL and then LocalStorage

This is why we have localForage.

If you use a standard Pinia store, you can use plug-ins. For example, you can use pinia-plugin-persistedstate to let the user start each new session where they left off. Or you can use pinia-orm to simplify handling large amounts of tabular data.

How about this plugin, then?: https://github.com/prazdevs/pinia-plugin-persistedstate.

When your application starts, fill your Pinia/Vuex store with data from the user's previous session. This is done automatically by pinia-plugin-persistedstate or the Vuex equivalent.

pinia-plugin-persistedstate: keeps your Pinia store synced with the user's browser localStorage. In other words, if your user closes their browser and then returns to your Vue app later, they will have the same state as when they left.

You also mentioned that the positions should be stored in localStorage. I would store the positions in Pinia, and then add the pinia-plugin-persistedstate plug-in. It's one import statement and one line of code to add that plugin, and then your Pinia state is automatically persisted in localStorage. It beats having to write and troubleshoot the storage logic yourself.

I've used the pinia-plugin-persistedstate package and has worked fine for me.

I have a Vue 3 / TypeScript app that uses a combination of Firebase, Pinia, Vue Concurrency, and the Pinia Persisted State Plugin.