HTML5
What are the Different Types of Storage in HTML5?
HTML5 provides several client-side storage mechanisms for keeping data in the browser. The main options are localStorage, sessionStorage, IndexedDB, and cookies. Each differs in capacity, lifetime, and how it is accessed. (Note: the older Application Cache is deprecated.)
Comparison of Storage Types
| Type | Capacity | Lifetime | Sent to server? | Best for |
|---|---|---|---|---|
| localStorage | ~5–10 MB | Persists until explicitly cleared | No | User preferences, small persistent data |
| sessionStorage | ~5–10 MB | Cleared when the tab/session ends | No | Per-tab temporary data (e.g., form state) |
| IndexedDB | Large (hundreds of MB+) | Persists until cleared | No | Large structured/offline data, files |
| Cookies | ~4 KB per cookie | Configurable expiry (session or dated) | Yes (every request) | Auth tokens, server-read session IDs |
Web Storage: localStorage and sessionStorage
Both store simple key/value string pairs and share the same simple API. The difference is lifetime: localStorage persists across sessions, while sessionStorage is cleared when the tab is closed.
// localStorage (persistent)
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme")); // "dark"
// sessionStorage (per tab, cleared on close)
sessionStorage.setItem("step", "2");
console.log(sessionStorage.getItem("step")); // "2"IndexedDB and Cookies
- IndexedDB: a transactional, indexed database in the browser for large amounts of structured data — ideal for offline apps.
- Cookies: small pieces of data sent to the server with every HTTP request; best for authentication and server-side session tracking, not bulk storage.
ℹ️
Web Storage (localStorage/sessionStorage) is NOT sent to the server, so it keeps requests lightweight. Cookies ARE sent with every request — keep them small. The deprecated AppCache should not be used for storage.