Understanding Cookies in Web Browsers

The Cookie is a small message from a web server passed to the user’s browser when you visit a website. In other words, Cookies are small text files of information created/updated when visiting a website and stored on the user’s web browser. Cookies are commonly used for information about user sections, user preferences and other data on the website. Cookies help websites remember users and track their activities to provide a personalised experience.

Where are cookies stored?

Cookies are small pieces of data that are stored on a user’s device when they visit a website. These data files are typically stored in the user’s web browser. Depending on the browser and platform, cookies can be found in different locations. Commonly, cookies are stored in a specific folder or directory on the user’s computer or device. I

• In Windows, they are often found in the C:\Users[username]\AppData\Roaming[browser name]\Cookies directory,
• In macOS, they can be found in the ~/Library/Cookies directory. However, the exact location can vary based on the browser and operating system.

Types of Cookies:

There are several types of cookies which serve a unique functionality of use. We will discuss the 4 main types of cookies.

• Session cookies
• Persistent cookies
• First-party cookies
• Third-party cookies

Session cookies:

Session cookies are also known as temporary cookies which are present as long as the user browser is open. Session cookies are deleted once the browser is closed and the user’s session is inactive (time-based). Session cookies are most often used to maintain the user’s session ( like authentication ) on the browser.

Persistent cookies:

Persistent cookies are also known as permanent/long-term cookies. Persistent cookies can last longer than session cookies. Persistent cookies are stored on the user’s device for a specific period ( for less than 6 months ). Persistent cookies are most often used for long-term tracking and remembering user preferences.

First-party cookies:

First-party cookies are set by the website that you are currently visiting. First-party cookies are generally used to provide a good user experience, collect the analytics data, remember language settings etc.

Third-party cookies:

Third-party cookies are set by the domains that you are not visiting. Third-party cookies are mostly used for cross-site tracking and advertising purposes these cookies collect data about your browsing habits and serve ads according to it. For example, when you visit a website, it may include content (such as ads or social media widgets) from third-party domains. These third-party domains can set cookies on your browser to track your online activity and build profiles for targeted advertising or analytics.

What are cookies used for?

Cookies serve several purposes, including:

• User Sessions: Cookies are often used to maintain user sessions, allowing websites to remember user data, preferences, and login status across multiple pages or visits.
• Tracking: They are used for tracking user behaviour on websites, collecting data on which pages are visited and how users interact with the site.
• Personalization: Cookies enable websites to offer personalized experiences by remembering user preferences, such as language settings, shopping carts, and customized content recommendations.

Features:

• Persistence: Cookies can be persistent or session-based, which will be dependent on the time duration of data to last.
• Key-Value Storage: Cookies stores data in a key-value pair and the key-value pair makes it easy to retrieve and update data.
• Security: Cookies can have security features like HttpOnly and Secure attributes to protect against unauthorized access.

Benefits:

• User Convenience: Cookies mainly enhance user experience by storing user preferences like language settings, shopping cart items, etc.
• Tracking: Cookies are used as trackers to collect user’s behaviour which will be helpful for marketing strategies, improving content, etc.
• Authentication: Cookies are essential for maintaining the user’s session and authentication to stay logged in.

When to Use Cookies?

Cookies are used when you need

• To store user preferences and settings.
• To implement authentication and session management.
• To track user behaviour for analytics.
• To customise user experiences.
• To implement shopping carts and e-commerce functionality.

How do cookies affect privacy?

Cookies can have both positive and negative effects on privacy:

• Positive: Cookies can enhance user experiences by remembering preferences and login information, making websites more user-friendly.
• Negative: Cookies can raise privacy concerns when they are used for tracking and profiling without user consent. Excessive tracking can result in a loss of online privacy and the potential for data misuse.

Example:To implement a cookie in JavaScript, follow these steps to set, read, and delete a user’s language cookie:

Javascript

<script>
    function setCookie(name, value, daysToExpire) {
        const date = new Date();
        date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
        const expires = "expires=" + date.toUTCString();
        document.cookie = name + "=" + value + "; " + expires;
        console.log(name+" cookie created");
    }

    // read cookie
    function getCookie(name) {
        console.log(document.cookie);
        const decodedCookie = decodeURIComponent(document.cookie);
        const cookies = decodedCookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            let cookie = cookies[i].trim();
            if (cookie.indexOf(name + "=") === 0) {
                return cookie.substring(name.length + 1);
            }
        }
        return null;
    }

    // delete cookie
    function deleteCookie(name) {
        document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
        console.log(name+" cookie deleted");
    }

    // Set a cookie
    setCookie("userLanguage", "en-US", 30);

    // Read a cookie
    const language = getCookie("userLanguage");
    console.log("User's language: " + language);

    // Delete a cookie
    deleteCookie("userLanguage");
</script>

Output:

user’s language cookie example output