DEV Community

Manthan Ankolekar
Manthan Ankolekar

Posted on

Cookies vs Local Storage vs Session Storage

#cookies #localstorage #sessionstorage #javascript

Cookies

Cookies are data, stored in small text files, on your computer.

// Create a Cookie with JavaScript document.cookie = "username=Manthan Ankolekar"; // With expiry date (in UTC time) document.cookie = "username=Manthan Ankolekar; expires=Thu, 28 Apr 2013 12:00:00 UTC"; // With a path parameter document.cookie = "username=Manthan Ankolekar; expires=Thu, 28 Apr 2013 12:00:00 UTC; path=/"; // Read a Cookie with JavaScript let data = document.cookie; // Change a Cookie with JavaScript document.cookie = "username=Manthan Ank; expires=Thu, 28 Apr 2013 12:00:00 UTC; path=/"; // Delete a Cookie with JavaScript document.cookie = "username=; expires=Thu, 28 Apr 2013 12:00:00 UTC; path=/";
Enter fullscreen mode Exit fullscreen mode

Local Storage

Local storage object let you store key/value pairs in the browser.

Syntax -

window.localStorage // or localStorage
Enter fullscreen mode Exit fullscreen mode 
// Save Data to Local Storage localStorage.setItem(key, value); // Read Data from Local Storage let data = localStorage.getItem(key); // Remove Data from Local Storage localStorage.removeItem(key); // Remove All (Clear Local Storage) localStorage.clear();
Enter fullscreen mode Exit fullscreen mode

Session Storage

Session storage object allows you to save key/value pairs in the browser.

Syntax -

window.sessionStorage // or sessionStorage
Enter fullscreen mode Exit fullscreen mode 
// Save Data to Session Storage sessionStorage.setItem("key", "value"); // Read Data from Session Storage let data = sessionStorage.getItem("key"); // Remove Data from Session Storage sessionStorage.removeItem("key"); // Remove All (Clear Session Storage) sessionStorage.clear();
Enter fullscreen mode Exit fullscreen mode

Difference between Cookies vs Local Storage vs Sesssion Storage

Cookies Local Storage Session Storage
Stoage Capacity 4kb 10mb 5mb
Browser Support HTML4/HTML5 HTML5 HTML5
Accessibility Any Browser Window Any Browser Window Same Browser Tab
Expiry Can set Manually Never On Browser Tab Closes
Stored In Browser & Server Browser Only Browser Only
Sent with requests Yes No No
Supported Data Types Strings Only Strings Only Strings Only
Auto Expiry Yes No Yes
Edit/block Yes Yes Yes
SSL Support Yes No No

Top comments (0)