DEV Community

Manthan Ankolekar
Manthan Ankolekar

Posted on

3

Cookies vs Local Storage vs Session Storage

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

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more