Cookie vs Local Storage vs Session Storage - a detailed comparison

Are you always confused between session storage, local storage and cookies? If yes, then you are at the right place This article will give you a brief, to the point understanding of these 3 important features.

Cookie, localStorage, and sessionStorage are all the simple data storage ways for client-side storage. Cookie is more like an old school way to handle the simple data stored on the client-side. In HTML5, web storage, such as localStorage or sessionStorage is introduced and it’s also easier to use.

Local Storage

  • Stores data with no expiration date.
  • It gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data
  • Storage limit is the maximum amongst the three

Session Storage

  • The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
  • Data is never transferred to the server.
  • Storage limit is larger than a cookie (at least 5MB).

Cookie

  • Stores data that has to be sent back to the server with subsequent requests. Its expiration varies based on the type and the expiration duration can be set from either server-side or client-side (normally from server-side).
  • Cookies are primarily for server-side reading (can also be read on client-side), localStorage and sessionStorage can only be read on client-side.
  • Size must be less than 4KB.
  • Cookies can be made secure by setting the httpOnly flag as true for that cookie. This prevents client-side access to that cookie.

That's all for now. Thank you for reading and I hope this post will be helpful :)