Cookies are a way to store small amounts of data on the client side (i.e., the user's browser) that can be used to remember information between different requests or sessions.
A cookie contains the information as a string generally in the form of a
name-value pair separated by semi-colons. It maintains the state of a user and
remembers the user's information among all the web pages.
Advantage of Cookies
Cookies have several advantages that make them a useful tool for web
- Persistence - Cookies can store data on the client side
even after the user closes their browser or navigates away from the website.
This makes it possible to remember user preferences and settings between
- Versatility - Cookies can store a variety of data
types, including strings, numbers, and even complex data structures such as
JSON objects. This makes it possible to store and retrieve a wide range of
information on the client side.
- Simplicity - Cookies are easy to create and manage
no additional software or plugins to work, and are supported by all modern
- Efficiency - Cookies are lightweight and have a small
footprint, which means they can be transferred quickly over the network and
stored efficiently on the client side.
- Personalization - Cookies can be used to personalize
the user experience by displaying customized content, ads, or
recommendations based on the user's behavior or preferences.
Limitation of Cookies
Cookies have some limitations and potential drawbacks that web developers
should be aware of:
- Size Limitations - Cookies have a limited storage
capacity, typically around 4KB per cookie. This means that they cannot be
used to store large amounts of data, such as images or videos.
- Security Risks - Cookies can be vulnerable to security
risks such as cross-site scripting (XSS) attacks, in which an attacker can
inject malicious code into a website that can steal the user's cookie data.
Cookies can also be intercepted or modified during transmission, which can
compromise the security of the user's data.
- Privacy Concerns - Cookies can be used to track user
behavior across multiple websites, which can raise privacy concerns. In some
cases, cookies can be used to collect sensitive information such as login
credentials or financial information, which can be a significant security
- Compatibility Issues - Some older web browsers may not
support cookies or may have limited support, which can cause compatibility
issues for users. Additionally, some users may disable cookies for privacy
reasons, which can affect the functionality of some websites.
Create a Cookieg
To create a cookie, you can set the document.cookie property to a string in the following format:
name=value; expires=date; path=path; domain=domain; secure
Here's an example of creating a cookie:
document.cookie = "username=Rohatash;
expires=Thu, 25 Jan 2025 00:00:00 UTC; path=/";
This creates a cookie named username with the value Rohatash, which will expire on January
25, 2025, and is accessible from any path on the domain.
Read a Cookie
To read a cookie, you can simply access the document.cookie property.
let username = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*\=\s*([^;]*).*$)|^.*$/, "$1");
console.log(username); // "Rohatash"
This code reads the value of the username cookie and stores it in the username variable.
Deleting a Cookie
To delete a cookie, you can set its expiration date to a time in the past:
document.cookie = "username=; expires=Thu, 25 Jan 1970 00:00:00 UTC; path=/;";
This code sets the username cookie's expiration date to January 25, 1970, effectively deleting it.
and to consider other options such as local storage or session storage for storing sensitive or user-specific data.