Cookies vs Local Storage vs Session Storage

Manthan Ankolekar - Apr 28 '23 - - Dev Community

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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .