DEV Community

Cover image for LocalStorage VS SessionStorage VS Cookie
aryan015
aryan015

Posted on

2 1

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 🔗

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay