Browser Storage: Cookie vs LocalStorage vs SessionStorage vs IndexedDB

In browser there are several types of built-in data storage that can be used to save user state, cache, settings, etc.

Main Storage Types

Cookie

• Allow transferring data between client and server
• Used for authorization, sessions, personalization
• Sent in every HTTP request, so should be compact
• Configured via Set-Cookie header or document.cookie

document.cookie = "theme=dark; path=/; max-age=3600";

LocalStorage

• Suitable for long-term data storage (theme, tokens, settings)
• Available only on client
• Survives browser restart

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
localStorage.removeItem("theme");

SessionStorage

• Similar to localStorage, but lives only within one tab
• After closing tab — data is deleted

sessionStorage.setItem("step", "2");
sessionStorage.getItem("step");

IndexedDB

• Asynchronous database in browser (key-value + indexes)
• Allows storing structured objects, even files
• Suitable for offline-first applications, PWA, large data

const db = indexedDB.open("MyDB", 1);

Easier to use via wrappers:

• idb
• Dexie.js

When to Use What?

Conclusion

• Use cookie for transferring between client and server
• Use localStorage for permanent client data
• Use sessionStorage for temporary, one-time data
• Use IndexedDB for complex and large storage