I ❤️ cookies. They have been around since 1994. The world of Inter-web today would look very different if we didn't have cookies.
Without cookies, the web would be a static and boring place, where everybody would be reading the same news feed on dev.to.
Cookies are simple key-value data that your browser stores. E.g., This line below is a cookie.
A cookie can be created/updated/deleted by
- The server via
But, cookies are private to domain, meaning only the client-side code running in the domain can access it. E.g., when you open
The browser automatically sends all cookies of a domain as part of the requests to the domain's server. E.g., with the example above, each request to
dev.to will include that cookie. This allows
dev.to's server to read the cookie value from the request, and associate the request with a previous visitor (aka
Just like any cookies 🍪 you can buy in stores. They expire.
// expires at time sessionId=123; expires=Thur, 5 Sep 2019 12:34:56 UTC // expires in a year sessionId=123; max-age=31536000 // expires when browser closes sessionId=123;
Sometimes there are too many cookies to send for a certain domain, and we can use
path to send only cookies that match a path.
// only send this cookie when current location is "/newsfeed/*" sessionId=123; path="/newsfeed"
Though invisible to most users, it's most famous for supporting
sessionIds (or similar names), which is a fundamental building block for enabling user-identity on web.
dev.to as an example. First time I accessed
dev.to, their server set a cookie with name
_PracticalDeveloper_session to my browser. Since then, every time I go to
dev.to, I present the
_PracticalDeveloper_session cookie value in each http request to their server, and that proves me as
techbos. This allows
dev.to server to send me MY personal newsfeed and notifications, not @ben
dev.to cookies in image below:
First of all, you can't eat them 🙃 .
Besides that, cookies are bad for storing arbitrary data in the browser, because:
- It has some serious size limitations (see bottom).
- They are automatically included in every single request sent to the server. The more data in cookies, the more bandwidth your request will consume.
sessionIds, there is no alternatives to cookies in web's world.
For storing data in the local browser, there are three choices:
- LocalStorage: persisted until user clears cache.
- Session Storage: persisted until browser or tab is closed.
- IndexedDB: Useful for storing large amount of structured data. Pretty complex low-level stuff.
However, do NOT store sensitive information (e.g., tokens, passwords, etc.) using above options as they are not meant as secure data stores.
The TL;DR version is to use
HttpOnly to protect your cookies.
sessionId=123; Secure; HttpOnly;
Secure ensures the cookie is only available to server when accessing the site using https. Thus preventing man-in-the-middle.
Each browser has slightly different implementation over how many cookies per domain can be stored at a time, and what the max data size for each cookie. A general rule of thumb is each cookie shouldn't exceed 4KB of data, and the total size of all cookies for one domain shouldn't exceed 4KB either.