LocalStorage vs SessionStorage vs Cookies

in Code Write a comment

Some developers may find it difficult to explain the difference between localStorage, sessionStorage cookies. But it’s actually very straightforward.

LocalStorage

  • Data stored in localStorage has no expiration time.
  • It doesn’t get cleared when the page session ends.
  • Storage limit varies from browser to browser. Last time I’ve checked, Chrome 65.0.3325.181 let me save 5200 thousands of characters.
// Save data to sessionStorage
 sessionStorage.setItem('key', 'value');

SessionStorage

  • Very similar to localStorage. The main difference is that data stored in sessionStorage has an expiration time. It gets cleared when the browser closed.
  • Maximum size is larger than per cookie.
 // Save data to sessionStorage
 sessionStorage.setItem('key', 'value');

Cookies

  • Have expiration time.
  • Data stored in cookies can be sent back to the back-end with subsequent requests.
  • Size is limited to 4096 characters per cookie.
Client-side
var setting = browser.cookies.set(
  details // object
)
Server-side
Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/

Renat Galyamov

Hi, I'm Renat Galyamov

I'm a founder of Wonder.store and MED24.KZ.

A front-end developer with over 9 years of experience building businesses together with founders as well as large enterprises, such as Accenture, The British Museum, Admiral, Kimberley Process, 21st Century Fox and many others.

Subscribe to get my best articles in your inbox first


Join hundreds of weekly readers

I share my coding tips 💻, write about useful services ✌️ and share photos from beautiful places ⛰️



Write a Comment

Comment