LocalStorage Demo

Demo

Tap the zone below to pick a JPG or PNG file. It will be saved locally using localStorage. Then reload the page — the file will still be here, allowing it to persist across sessions and visits. The code of the demo is available below.

LocalStorage vs IndexedDB

The web offers two major local storage solutions: LocalStorage and IndexedDB. Here are some of the advantages of LocalStorage:

• Incredibly Simple API: specific data can be saved and retrieved with just one line of code (setItem and getItem), unlike IndexedDB's complex event-based system.
• Zero Setup Required: There is no need to open a database connection, define a schema, manage versions, or handle transactions.
• Synchronous Access: perfect for reading small configuration settings (like "Dark Mode") instantly before the page renders, preventing UI flickering.
• Ideal for Key-Value Pairs: The most efficient tool for storing simple unstructured data, such as session tokens or user interface preferences.

API

Code

Links & Documentation

• localStorage on MDN
• Web Storage API on MDN