| 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:
-
LocalStorage- Usually data never expires and must stores non-sensitive data like user preference, application state etc. -
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). -
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=/";
reading cookie
console.log(document.cookie) // Outputs all cookies🍪 as a string
Session Storageđź“®
sessionStorage.setItem('sessionData', 'temporaryValue');
let sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData); // Outputs: temporaryValue
removing and clearing
sessionStorage.removeItem('sessionData'); // it will only remove particular key
sessionStorage.clear(); // clean the whole storage
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();
How to see storages in Browser (chrome)
LinkedIn 🔗 ❤
Top comments (0)