DEV Community

loading...
Cover image for Cookies vs Local Storage

Cookies vs Local Storage

Pragati Verma
MLH Fellow | DSC Lead | SIH2020 Winner | MLSA 2020 | GSSoC'20 Mentor | GCI'19 Mentor @CircuitVerse | Full Stack Web Developer | Open Source Enthusiast
Originally published at community.codenewbie.org ・2 min read

One of the most popular myths in the web dev community is around cookies & local storage. It's also a commonly asked interview question. Let's uncover the concept behind these two storage mechanisms!

Cookies vs Local Storage

Introduction to Cookies

Cookies are small files that are located on a user’s computer. They are designed to hold a generous amount of data specific to a client and website, and they can be accessed either by the web server or the client computer.

  • The reason behind this is to allow the server to deliver a page tailored to a particular user, or the page itself can contain some script that knows of the data in the cookie, and therefore it can carry information from one visit to the website to the next.
  • Each cookie is effectively a small lookup table containing pairs of the key, data values.
  • Cookies are primarily for reading server-side.
  • Introduced before HTML5.
  • Has an expiration date.
  • Cleared by JS or by Clear Browsing Data of browser or after expiration date.
  • Will be sent to the server per each request.
  • The capacity is 4KB.
  • Only strings can be stored in cookies.
  • There are two types of cookies: persistent and session.

Disadvantages:

  • Each domain stores all its cookies in a single string, which can make parsing data difficult.
  • Data is unencrypted, which becomes an issue because though small in size, cookies are sent with every HTTP request.
  • SQL injection can be performed from a cookie.
  • If we have unnecessary cookies, they will be sent with all the requests and responses and hence slow down the application.

Introduction to LocalStorage

localStorage is an implementation of the Storage Interface. It stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data — unlike cookie expiry.

  • Local Storage is as big as 5MB per domain.
  • Local storage can only be read by the client-side.
  • Introduced with HTML5.
  • Does not has an expiration date.
  • Cleared by JS or by Clear Browsing Data of the browser.
  • You can select when the data must be sent to the server.
  • Data is stored indefinitely and must be a string.
  • Only have one type.
  • Support by most modern browsers
  • Same-origin rules apply to local storage data

localStorage will not be available if you switch from 'HTTP' to 'HTTPS' secured protocol, where the cookie will still be accessible.

Disadvantages:

  • Data once stored is persistent. It is the duty of the application to clean data after use.
  • Data stored in localStorage is not secured. Never store sensitive information to localStorage.

Cookies vs Local Storage

Find more information about cookies and local storage on the links below:


If you found this article insightful and helpful, then do let me know your views in the comments. In case you want to connect with me, follow the links below:

LinkedIn | GitHub | Twitter | StackOverflow

Discussion (12)

Collapse
pobx profile image
Pobx

I agree with you about we did not store a sensitive data in localStorage. Actually, It's a place for access_token(public data) that is enough.

Collapse
asimaltayb profile image
asim altayb

What about store user info like email, phone number and name
And his access_token
All of them encrypted
In local storage

Collapse
pragativerma18 profile image
Pragati Verma Author

Hey Asim, ideally, you can't secure local storage and it is not recommended to store any sensitive data in local storage. You can try and encrypting it, but there is a catch. Encrypting it on the client is possible, but would mean the user has to provide a password and you have to depend on not-so-well-tested javascript implementations of cryptography.

Encrypting on the server side is of course possible, but then the client code cannot read or update it, and so you have reduced localStorage to a glorified cookie.

If it needs to be secure, its best to not send it to the client. What is not in your control can never be secure.

Collapse
pobx profile image
Pobx

How to encrypt all above of them. I have no idea about it.

Thread Thread
pragativerma18 profile image
Pragati Verma Author

Although, it's not preferred to store data in localStorage but if you want to encrypt it, you can try the below links:

Thread Thread
pobx profile image
Pobx

Thank you for your information. I was read both of them on gitHub. I think the secure-ls libraries sound good. but I don't have idea to used it for more secured my localStorage because I need to set a key in client application(like js) and it's can read by browser network tab(Edge, Chrome). Thank you for your advice.

Collapse
yosh profile image
Yosh (यशोधन)

Worth noting that server cookies sent over HTTPS with the Secure flag are indeed encrypted.

Collapse
johann_lr profile image
Johann

Is the local Storage really as big as 5Mb per domain in general? I use an application storing a bit more there…

Collapse
pragativerma18 profile image
Pragati Verma Author

Hey, Johann. localStorage capacity varies by browser, with 2.5MB, 5MB, and unlimited being the most common values. Google Chrome, Mozilla Firefox, and Opera provide 10MB per origin. You can also customize the storage size.

You can use this test to check for the storage size in your browser.

Hope this helps. If you have any other doubts, let me know.

Collapse
johann_lr profile image
Johann

Thanks for the answer!

Collapse
asimaltayb profile image
asim altayb

What about store user info like email, phone number and name
And his access_token
All of them encrypted
In local storage

Collapse
pragativerma18 profile image
Pragati Verma Author

Hey Asim, ideally, you can't secure local storage and it is not recommended to store any sensitive data in local storage. You can try and encrypting it, but there is a catch. Encrypting it on the client is possible, but would mean the user has to provide a password and you have to depend on not-so-well-tested javascript implementations of cryptography.

Encrypting on the server side is of course possible, but then the client code cannot read or update it, and so you have reduced localStorage to a glorified cookie.

If it needs to be secure, its best to not send it to the client. What is not in your control can never be secure.