Both cookies and localStorage
are ways to store data on the client's side, but they have different purposes, use-cases, and characteristics. Here's a comparison of the two:
-
Lifespan:
- Cookies: Can have a set expiration date. If not set, they will expire at the end of a session (i.e., when the browser closes).
- LocalStorage: Does not have an expiration date. Data persists until explicitly deleted.
-
Capacity:
- Cookies: Limited to 4KB per cookie.
-
LocalStorage: Typically, browsers allocate around 5-10 MB for
localStorage
(though the exact amount can vary by browser).
-
Scope:
- Cookies: Scoped to domains and paths. Can be sent with every HTTP request to the domain, if the cookie's domain and path match the request.
-
LocalStorage: Only accessible via JavaScript on the same domain. Data stored in
localStorage
is not sent with HTTP requests.
-
Performance:
- Cookies: Since they are sent with every HTTP request to a domain (if they match domain and path), they can potentially slow down web traffic slightly.
- LocalStorage: Does not impact HTTP traffic, as the data is only stored and accessed client-side.
-
Server Side:
- Cookies: Can be read server-side, which is useful for authentication tokens and other server-side tasks.
- LocalStorage: Cannot be read server-side.
-
Data Storage:
- Cookies: Primarily store data as strings. They have a size limit of about 4KB per cookie and are sent with every HTTP request, which can affect performance. Cookies can also have attributes like expiration, domain, and path.
-
LocalStorage: Part of the Web Storage API, it allows you to store key-value pairs in a web browser. Though it inherently stores everything as a string, you can store objects by serializing them with
JSON.stringify()
when saving and deserializing withJSON.parse()
when retrieving. Unlike cookies, LocalStorage data isn't sent with every HTTP request, and it has a much larger storage limit (around 5-10MB depending on the browser).
-
Security:
-
Cookies: Can be secure (if set with the
Secure
flag) and only transmitted over HTTPS. Also can be flaggedHttpOnly
, which means they cannot be accessed via JavaScript, providing some protection against cross-site scripting (XSS) attacks. -
LocalStorage: Vulnerable to cross-site scripting (XSS) attacks. If an attacker can run JavaScript on a website, they can access and modify
localStorage
.
-
Cookies: Can be secure (if set with the
-
Use Cases:
- Cookies: Typically used for sessions, user identification, and tracking.
- LocalStorage: Great for storing larger amounts of non-sensitive data on the client side, like user settings, cached data, or offline app data.
-
Ease of Use:
- Cookies: A bit more cumbersome to work with in JavaScript without libraries.
-
LocalStorage: Has a very straightforward API (e.g.,
localStorage.setItem('key', 'value')
andlocalStorage.getItem('key')
).
-
Other Storage Options:
- Beyond cookies and
localStorage
, modern browsers also offersessionStorage
(similar tolocalStorage
but expires with the session) and IndexedDB (a more complex client-side database system).
- Beyond cookies and
In conclusion, while both cookies and localStorage
offer client-side data storage, their use-cases, characteristics, and technical details vary greatly. The choice between them largely depends on the specific requirements of your web application.
Thank you for reading. I encourage you to follow me on Twitter where I regularly share content about JavaScript and React, as well as contribute to open-source projects and learning golang. I am currently seeking a remote job or internship.
Twitter: https://twitter.com/Diwakar_766
GitHub: https://github.com/DIWAKARKASHYAP
Portfolio: https://diwakar-portfolio.vercel.app/
Top comments (2)
This man need be appreciated. Great Work!!
A few comments. In point 6, it feels a bit unfair since the same techniques to store complex data in LocalStorage also works for Cookies. (To be clear, I never recommend Cookies, just want to be "fair". ;)
Secondly and as an FYI, there is a new spec that makes it easier to work with Cookies. It's only Chrome/Edge now but you can read more about it here: raymondcamden.com/2023/04/12/using...