Local Storage vs Session Storage vs Cookie

// LocalStorage
localStorage.setItem(“name”, “Natan”);
localStorage.getItem(“name”); //Natan
// SessionStorage
sessionStorage.setItem(“name”, “Cabral”);
sessionStorage.getItem(“name”); // Cabral
// Cookie
window.cookie = “name=Natan; expires=” + new Date(9999,01,01).toUTCString();
window.cookie; // all data

Local Storage

• Has no expiration date
• Client only
• Has no SSL support
• Data are not transferred on each HTTP request
• 5 mb limit (check with the browser)

Session Storage

• Data is gone when you close the browser tab
• Client only
• Has no SSL support
• Data are not transferred on each HTTP request
• 5–10 mb limit (check with the browser)

Cookies

• Has different expiration dates (both the server or client can set up expiration date)
• The Client can’t access the Cookies if the HttpOnly flag is true
• Has SSL Support
• Data are transferred on each HTTP request
• 4kb limit

Browser

In chrome browser, by inspect element, we can go to application tab and see values which are in localStorage, Session Storage and Cookies.

If you need get size:

const size = 
Number(
  new Blob(Object.values(window.localStorage)).size / 1024
).toFixed(2) + ‘ KB’;