Storing playlists and settings directly on the user's device provides exceptional performance and privacy. We explore how to manage IndexedDB and Web Storage inside the browser sandbox.

IndexedDB vs LocalStorage

Web browsers offer two main mechanisms for local data persistence: LocalStorage and IndexedDB.

LocalStorage is a simple key-value store. It is synchronous, blocking the main thread during reads and writes, and is limited to approximately 5MB of string data. It is excellent for basic preferences, like dark mode settings or active volume levels.

IndexedDB is a robust, asynchronous database. It supports transaction management, indexes, and can store large amounts of structured binary data (such as cached audio blobs or complex playlist arrays).

In VxMusic, we use LocalStorage for simple configuration options, and IndexedDB for storing playlist arrays and caching track metadata. Because IndexedDB is asynchronous, database transactions do not block our UI animations or audio playback.

Managing database migrations is a key challenge when using IndexedDB. If we release an update that changes our playlist schema, we must update the local database database safely without losing the user's existing records. We write migration scripts that run on application load, updating schemas incrementally to maintain data integrity.

Securing Data at Rest

While local storage prevents remote data breaches, it does not protect your library database if your physical device is compromised. In VxMusic, we are integrating client-side encryption.

We utilize the browser's native Web Crypto API to generate cryptographic keys. The playlist data is encrypted with AES-GCM before writing to IndexedDB. This ensures that even if another application gains access to the browser's storage, they cannot read your listening logs or playlist files without your local key.

This local encryption provides a robust security layer. Because the encryption keys are stored securely in the browser's Keychain (via the Credential Management API) and never uploaded to our servers, the user maintains absolute control over their decryption pipeline, safeguarding their digital privacy.