DEV Community

Ayako yk
Ayako yk

Posted on

Cookie vs Session Storage vs Local Storage

Until quite recently, every time I was asked to accept cookies, I was scared that my personal info might be stolen and get involved in a trouble someday. I was that ignorant. So, I did some research and summarized it in a super simple, easy-to-understand (-for-me) way.

First of all, those storage mechanisms allow us to avoid logging in every single time, or selecting items and adding to our shopping cart again after leaving the website.

COOKIES
When a user visits a website (or sends a request for a webpage), a server sends back a piece of data and the cookie is stored in the user's browser. When the user visits the same website again, the user is sending that cookie to the server so that the server can recognize the request comes from the same browser (so our login info or cart items are remained).
Either a server or a client can set an expiration date. But there are some disadvantages such as its small data capacity (4KB) and its low security.

Here is another storage mechanism: Web Storage API.
Data is stored and retrieved in a browser/ on a client side.

sessionStorage
Data can be stored at most 5MB; data is never transferred to a server; data is expired once the user's window or tab is closed.

localStorage
It's the same as the sessionStorage except that data is stored with no expiration date (until the user edits or deletes it) and its data capacity is 10MB.

This summary would not be enough and needs digging deep into more details for security wise and source codes. The next step would be to focus on those, and start learning JSON Web Token.

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

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay