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.

Top comments (0)