How the web works · Comparison

Cookies vs localStorage vs IndexedDB

Three ways a website can keep data in the visitor's browser. They differ in size, in whether the data travels to the server, and in who can read it.

3 options · 8 questions side by side · updated

CompareCookieslocalStorage and sessionStorageIndexedDB
What it holdsSmall text valuesText keys and valuesObjects, files and blobs
SizeAbout 4 KB per cookieAbout 5 MB per siteHundreds of MB or more
Sent to the serverYes, with every requestNoNo
LifetimeUntil it expires, or the browser session endsUntil cleared; sessionStorage until the tab closesUntil cleared, or evicted when space runs low
How code uses itSet-Cookie header or document.cookieSimple, synchronous getItem and setItemAsynchronous; easier with Dexie or idb
Readable by page scriptsYes, unless marked HttpOnlyYes, alwaysYes, always
Best forSign-in sessions and consent choicesPreferences, drafts and UI stateOffline data, caches and large datasets
Watch out forConsent rules and request sizeXSS can read everything in itBrowsers may clear it without persistent storage

How to choose between Cookies, localStorage and sessionStorage and IndexedDB

  • Pick cookies, marked HttpOnly, Secure and SameSite, for anything that proves who the user is.
  • Pick localStorage for small, non-sensitive preferences that should survive a reload, and sessionStorage for state that belongs to one tab.
  • Pick IndexedDB when an app keeps a lot of data, works offline or stores files in the browser.

The options

More comparisons

Crafted in the dark. Shipped to the world.

Tell us what you are building. You get a private project space with a proposal and a line-by-line quote within a day.