DEV Community

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

Understanding Web Storage: LocalStorage, SessionStorage, and Cookies

Abhay Kumar on August 30, 2024

In modern web development, managing data on the client side has become an essential skill. Developers often rely on localStorage, sessionStorage, a...
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 ☺️

Collapse
 
fonteeboa profile image
João Victor

Nicely explained

Collapse
 
zeeshanali0704 profile image
ZeeshanAli-0704

Thanks

Collapse
 
malarium profile image
Marcin

If writing about data storage for web why didn't you include serviceWorkers' cache and indexDB?

Collapse
 
muhammad_shahidulislam_b profile image
Muhammad Shahidul Islam

Thanks for the nice explanation.

Collapse
 
yusra_saeed profile image
Yusra Saeed

Nicely explained

Collapse
 
andrewbaisden profile image
Andrew Baisden

That's a great explanation; by the way, you can add syntax highlighting to the code blocks to boost readabilty.

Just change:

code block with no colors example

... to specify the language:

code block with colors example

More details can be found here --> editor guide!

Collapse
 
st3adyp1ck profile image
Ilya Belous • Edited

LocalStorage is used for persistent client-side storage, surviving across sessions, while sessionStorage is temporary and only lasts for a session. Cookies store small data sent with HTTP requests, with configurable expiration. The post above provides examples and guidance on when to use each, such as storing user preferences or authentication tokens... Just summarized all of that for ya 😈

Collapse
 
abdulghanin profile image
abdulghani ibrahim

Thank you in information technology

Collapse
 
john_0519 profile image
Jhon William

thanks for your effort. It's amazing.
In the past I used localstorage, but after reading this article, I recognized my fault.
I'm waiting for your next articles.

Collapse
 
yogesh_joshi_c022cc46cdd6 profile image
Yogesh Joshi

nice

Collapse
 
legrandmawak profile image
legrandmawak

It might be a good idea to point out that both localStorage are limited to a single host (URL). Therefore if you want/need to share information to multiple URL, port, domain. You must use cookie.

Collapse
 
mhdajmalk profile image
mhdajmal-k

Thank you for sharing the valuable information

Collapse
 
rogeclash_4ac7756ff985814 profile image
RogeClash

amazing , thank you

Collapse
 
tomasdevs profile image
Tomas Stveracek

Great summary of web storage options! This will be really helpful for beginners. Maybe also consider adding a note about IndexedDB for more advanced storage needs. Thanks for sharing! 👏

Collapse
 
kc900201 profile image
KC

What about redis? @abhay1kumar