When building local first web applications, understanding how browsers store data is essential. Web browsers provide several mechanisms for local data persistence. The most common are LocalStorage, SessionStorage, and IndexedDB. Each mechanism has specific characteristics and limitations.
LocalStorage is a simple key value store. It is synchronous and limited to five megabytes of text data. This makes it perfect for storing user preferences, theme choices, and small configuration settings. However, it is not suitable for large files or binary payloads.
IndexedDB is a powerful, asynchronous database. It can store large amounts of structured data, including binary files and blobs. Browsers typically allocate storage based on available disk space. On modern devices, IndexedDB can store hundreds of megabytes or even gigabytes of data. This is where we store larger local states when persistent cache is required.
SessionStorage behaves similarly to LocalStorage but clears automatically when the tab is closed. This is ideal for temporary states that should not persist across browser restarts. By combining these storage APIs, web developers can create responsive, offline capable tools that do not rely on remote databases.