TheLazy.Dev
Portfolio GitHub

Blog

javascript |html |react |node

LocalStorage VS SessionStorage VS Cookie

aryan015

aryan015

Posted on November 10, 2024

LocalStorage VS SessionStorage VS Cookie
Cookies LocalStorage SessionStorage
Capacity 4kb 5-10 MBs (Browser Dependent) 5 MBs
Accessibility All windows All windows Private to tab
Expiration Manually Set Never expires On tab close
Passed in request Yes No No
Storage Browser and Server Browser Only Browser Only

Application

As you can seen main difference from above table. Here is the application of each storage type:

  1. LocalStorage - Usually data never expires and must stores non-sensitive data like user preference, application state etc.
  2. SessionStorage - Data is private to the tab and expires as soon as you close the window or tab. Suitable for storing temporary data that only needs to persist while a user navigates a single tab (e.g., form data before submission).
  3. Cookie - The storage capacity is very less and the data might require by the server like auth token or user preference.

Syntax

Cookie🍪 

// below snippet will set username as key 🔑
// Johndoe as value 🔓
// will set expiry date for the cookie which is 31 Dec 2024
// path (cookie available to entire website)
// if no path specified then cookie will be available to that particular site which created that cookie
// you can delete the cookie by setting🧰 the date that already expired (any previous date)
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
Enter fullscreen mode Exit fullscreen mode

reading cookie

console.log(document.cookie) // Outputs all cookies🍪 as a string
Enter fullscreen mode Exit fullscreen mode

Session Storage📮 

sessionStorage.setItem('sessionData', 'temporaryValue');
let sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData); // Outputs: temporaryValue
Enter fullscreen mode Exit fullscreen mode

removing and clearing 

sessionStorage.removeItem('sessionData'); // it will only remove particular key
sessionStorage.clear(); // clean the whole storage
Enter fullscreen mode Exit fullscreen mode

Local Storage🧰

Most comman storage type and all the functions are similar to the session type.

//set item
localStorage.setItem('username', 'JohnDoe');
// get itme
let username = localStorage.getItem('username');
console.log(username); // Outputs: JohnDoe
// remove item with key-value
localStorage.removeItem('username');
// reset store
localStorage.clear();
Enter fullscreen mode Exit fullscreen mode

How to see storages in Browser (chrome)

demo

LinkedIn 🔗 ❤

💖 💪 🙅 🚩
aryan015
aryan015

Posted on November 10, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

LocalStorage VS SessionStorage VS Cookie
javascript LocalStorage VS SessionStorage VS Cookie

November 10, 2024