LocalStorage vs SessionStorage vs Cookies

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().