DEV Community

Cover image for Understanding Web Storage: LocalStorage, SessionStorage, and Cookies
Abhay Kumar
Abhay Kumar

Posted on • Edited on

Understanding Web Storage: LocalStorage, SessionStorage, and Cookies

In modern web development, managing data on the client side has become an essential skill. Developers often rely on localStorage, sessionStorage, and cookies to store data in the user’s browser. While these three mechanisms serve similar purposes, they have distinct differences in terms of capacity, persistence, and use cases. In this blog, we'll explore these differences, with examples, to help you better understand when and how to use each one.

1. localStorage: Persistent Client-Side Storage

Purpose: localStorage is designed to store data on the client side that persists even after the browser is closed. It's an excellent choice for data that needs to be retained across multiple sessions.

Capacity: localStorage offers substantial storage space, typically up to 10MB per domain, which is sufficient for most applications.

Persistence: Data stored in localStorage remains available until explicitly deleted by the user or the application. This makes it ideal for storing user preferences, like theme settings, that should persist across different visits to the site.

Example: Suppose you have a web application that offers both light and dark modes. You can use localStorage to save the user's preference so that the next time they visit, the site automatically loads in their chosen mode.

Image description

2. sessionStorage: Temporary Session-Based Storage

Purpose: sessionStorage also stores data on the client side, but it is limited to the duration of the page session. This means the data is cleared when the user closes the browser tab or window.

Capacity: Similar to localStorage, sessionStorage provides around 5MB of storage per domain. Although the capacity is smaller, it's often sufficient for temporary data.

Persistence: The key difference between sessionStorage and localStorage is persistence. sessionStorage data is only available for the duration of the page session, making it suitable for storing temporary data that doesn't need to persist beyond the current session.

Example: Imagine a multi-step form where users input data across several pages. You can use sessionStorage to temporarily store the form data as the user progresses through the steps. This ensures that if they accidentally reload a page, they don’t lose their progress.



// Save form data temporarily in sessionStorage
sessionStorage.setItem('step1Data', JSON.stringify({ name: 'John Doe', age: 30 }));

// Retrieve the saved data
const step1Data = JSON.parse(sessionStorage.getItem('step1Data'));
console.log(step1Data); // Output: { name: 'John Doe', age: 30 }



Enter fullscreen mode Exit fullscreen mode

3. Cookies: Small, Persistent Storage with Server Interaction

Purpose: Cookies are used to store small pieces of data that need to persist across sessions and can be sent with HTTP requests to the server. They are often used for tracking user sessions, storing authentication tokens, and remembering user settings.

Capacity: Cookies are much smaller in capacity compared to localStorage and sessionStorage, with a limit of 4KB per cookie. However, multiple cookies can be stored, each with this limit.

Persistence: Cookies have a configurable expiration time. They can either expire at the end of a session or persist for a specified duration. This flexibility allows cookies to be used for both short-term and long-term storage.

Example: A common use of cookies is to store a user’s login token, which allows the user to stay logged in across sessions without having to re-enter their credentials every time they visit the site.



// Set a cookie with an expiration date
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// Retrieve the cookie value
const cookies = document.cookie.split(';').reduce((acc, cookie) => {
    const [key, value] = cookie.trim().split('=');
    acc[key] = value;
    return acc;
}, {});
console.log(cookies.username); // Output: JohnDoe



Enter fullscreen mode Exit fullscreen mode

When to Use Each Storage Mechanism

localStorage: Use when you need to store large amounts of data that should persist across multiple sessions and are not sensitive (e.g., user preferences, non-sensitive application state).
sessionStorage: Ideal for temporary data that should only persist for the duration of the user’s session (e.g., single-session form data, temporary state).

Cookies: Best for storing small pieces of data that need to be sent to the server with HTTP requests or need a specific expiration (e.g., authentication tokens, user preferences that need to interact with the server).

Conclusion

Understanding the differences between localStorage, sessionStorage, and cookies is crucial for making the right choice in your web applications. Each has its own strengths and limitations, and knowing when to use each one will help you build more efficient, user-friendly applications.

By mastering these tools, you'll be better equipped to manage client-side data storage in your next project, ensuring a seamless experience for your users.

🔗 Connect with me on LinkedIn:
Let's connect and discuss more about React, web development, and performance enhancement!

LinkedIn Profile:Abhay Kumar

Top comments (31)

Collapse
 
greenersoft profile image
GreenerSoft

One interesting thing to note with localStorage or sessionStorage is the “storage” event.

With this event, a browser tab (or window) can synchronize if the localStorage or sessionStorage is updated in another browser tab (or window).

Collapse
 
moarblur profile image
Faizan

Does this thing utilize "storage" event for the window animation syncing?
youtu.be/aKPkYY-CYuw

Collapse
 
greenersoft profile image
GreenerSoft

Yes, I think so, if you look at this project file.

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

The storage event only happens for local storage. This event is in direct contradiction to the definition of session storage.

Collapse
 
greenersoft profile image
GreenerSoft

Yes, it is not possible to synchronize a tab or window with the storage event for sessionStorage, since sessionStorage is private to each tab or window.

However, the storage event is sent in certain cases for sessionStorage, for example if you modify sessionStorage using the browser's developer tools.

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Nice read 👏

There is no usage of tags at the end.. just letting you know.
You might not know but there is a hooks system to use localstorage: mantine.dev/hooks/use-local-storage/

Not preferable to install a package but I thought it would be worth sharing here if anybody wants to check it out.

Collapse
 
abhay1kumar profile image
Abhay Kumar

I know about that, but you have to install the Mantine UI library. then only you can use this hook. thanks for your feedback.

Collapse
 
webreflection profile image
Andrea Giammarchi

cookies need decodeURIComponent for likely both the key and their values ... please update the example code accordingly, or surprises will happen 👋

Collapse
 
akki_02 profile image
Aakash

The best explaination between the localStorage, sessionStorage and cookies..

Collapse
 
engrsakib profile image
Md Nazmus Sakib

very Impressive

Collapse
 
chesedgamesonline profile image
ChesedGamesOnline

Very well written! Even I could understand

Collapse
 
cuongnp profile image
cuongnp

I love this one! Recently, I faced a couple of issues with them. Thanks for sharing!

Collapse
 
jacquihrt profile image
jacquelinehartnick06@gmail.com

I'm out of storage for almost one year and struggling alot even with phone storage

Collapse
 
ahtesham2000 profile image
Ahtesham Abdul Aziz

Thanks for the explanation mate.

Collapse
 
theprogrammer_7 profile image
the-pro7

Thanks for the information ☺️

Some comments may only be visible to logged-in visitors. Sign in to view all comments.