Web storage: Cookies 🍪

Introduction:

A cookie is just a storage to store data persistently on a user's device (browser). The actual cookie is stored on the browser and can be set both on the client as well as the server.

Features:

• How it works: Cookie can be set by the client as well as the server. Cookies can be transmitted via an HTTP call. A cookie set on the client side is accessible on the server side, but a cookie set on the server side may or may not be accessed on the client side based on some configurations.

• Types of cookies:

  1. Session cookie: Expires when you close the browser.

  2. Persistent cookie: Expires on the configured date.

• Size Limit: By default, we can store up to 4 KB of data inside cookies across the same origin**.** Example: https://www.google.com and https://www.twitter.com would have two separate local storages each having a max size of 4 KB.

• Performance: Cookies are transferred for every API request, so the HTTP request/response time can be affected due to cookie size.

• Data Persistence: The data stored in the web browser is persisted across tabs, sessions, and page reloads. However, it does not persist across different browsers.

• Data Expiry: The data expires on the browser closes or meets the expiry date.

• Data Structure: The data is stored in the format of a key-value pair similar to a hashmap. The value is always a string. If we want to store any complex types like an array or object, we would need to stringify with JSON.stringify().

  Note: If we want to store any numerical value inside cookie, it will be stored as a string, so on retrieval, we would want to parse it as a number.

• Security: The following configurations are recommended while setting cookies -

  • httpOnly: We should set httpOnly: true to the cookie so it can only be accessible on the client side, which will help prevent any security attacks like XSS, etc.

  • expiry: We should also set the expiry to a cookie.

  • domain/pathname access: We should also configure on which domain as well as the path a particular cookie is accessible.

  • secure: We should also set this to true, so it can only be accessible via HTTPS.

• When to use: Heavily used for authorization to store access tokens which are only accessible by server. We can also use cookies to store any lightweight data.

• When not to use: For larger datasets should be avoided, since we can store up to 4 KB of data, anything larger than that would be lost. Attacks like XSS, and CSRF need to be thought through to prevent any web attacks.

Conclusion:

• A cookie is a storage mechanism provided by the web browser to store data up to 5 MB inside the browser.

• Browser exposes window.localStorage API to perform insert, get, delete, and remove items inside the local storage

• Data inside the local storage is persisted across page reloads, browser sessions, and tabs.

If you found this article useful, feel free to like, comment or share. You can also connect me on LinkedIn here - https://www.linkedin.com/in/vinit-raut or you can find me on twitter too - https://x.com/vinitraut18