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 localStorage
 localStorage.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=/

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/localstorage-vs-sessionstorage-vs-cookies

PS: Make sure you check other Vue.js tutorials, e.g. Vue.js polling using setInterval().


Hi, I'm Renat 👋

 


A collection of UI components for
Bootstrap 4/5 and Vue.js

Get now

Write a Comment

Comment

2 Comments