Describe the difference between a cookie, `sessionStorage` and `localStorage`.

High
HTMLJAVASCRIPT

Similarities

Cookies, localStorage, and sessionStorage, are all:

  • Storage mechanisms on the client side. This means the clients can read and modify the values.
  • Key-value based storage.
  • They are only able to store values as strings. Objects will have to be serialized into a string (JSON.stringify()) in order to be stored.

Differences

CookielocalStoragesessionStorage
InitiatorClient or server. Server can use Set-Cookie headerClientClient
ExpiryManually setForeverOn tab close
Persistent across browser sessionsDepends on whether expiration is setYesNo
Sent to server with every HTTP requestCookies are automatically being sent via Cookie headerNoNo
Capacity (per domain)4kb5MB5MB
AccessAny windowAny windowSame tab

There are also other client-side storage mechanisms like IndexedDB which is more powerful than the above-mentioned technologies but more complicated to use.

References