Understanding Cookies in JavaScript

Welcome to JavaScript Series #73! In today's deep dive, we're unraveling the intricacies of web cookies – those small, yet powerful, pieces of data that enable personalized user experiences and maintain state across the stateless HTTP protocol. From tracking user preferences to managing login sessions, cookies are fundamental to how the modern web functions.

What are Web Cookies?

A web cookie (often just called a "cookie") is a small piece of data that a server sends to a user's web browser. The browser may then store it and send it back with the next request to the same server. Essentially, cookies are the browser's memory for specific websites. They were designed to be a reliable mechanism for websites to remember stateful information (e.g., items in a shopping cart, whether a user is logged in, or user preferences).

Cookies are primarily used for three purposes:

• Session management: Logins, shopping carts, game scores, or anything else the server should remember.
• Personalization: User preferences, themes, and other settings.
• Tracking: Recording and analyzing user behavior.

How Cookies Work with JavaScript

JavaScript provides a simple interface to interact with cookies via the document.cookie property. This property allows you to read, write, and delete cookies directly from the client-side. It's important to note that JavaScript can only access cookies that are not marked as HttpOnly.

Reading Cookies

When you access document.cookie, it returns a single string containing all cookies accessible by the current document, separated by semicolons. Each cookie in the string is in the format name=value.

Let's see an example:

// Assuming there are cookies like:
// myCookie=value1; userPreference=dark; sessionId=12345
console.log(document.cookie);
// Expected output: "myCookie=value1; userPreference=dark; sessionId=12345"
    

To get a specific cookie's value, you usually need to parse this string. Here's a utility function to help extract a cookie by its name:

function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for(let i=0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) {
            return decodeURIComponent(c.substring(nameEQ.length, c.length));
        }
    }
    return null;
}

// Example usage:
const username = getCookie('username');
console.log('Username:', username);

const language = getCookie('language');
console.log('Language:', language);
    

Writing (Setting) Cookies

To set a cookie, you assign a string to document.cookie. The string must contain the cookie's name, value, and optionally, several attributes that control its behavior and lifespan.

The basic syntax is:

document.cookie = "cookieName=cookieValue";
    

However, for practical use, you'll almost always include attributes like expires or max-age, path, and secure.

Common Cookie Attributes:

• expires=date: Specifies the exact date and time when the cookie should expire. If not set, the cookie is a "session cookie" and will be deleted when the browser closes. The date must be in UTC format (e.g., "Wed, 01 Jan 2025 00:00:00 GMT").
• max-age=seconds: An alternative to expires, specifying the number of seconds until the cookie expires. Takes precedence over expires if both are present.
• path=path: Defines the URL path for which the cookie is valid. By default, it's the current document's path. A path of / makes the cookie available to all pages on the domain.
• domain=domain: Specifies the domain for which the cookie is valid. If not specified, it defaults to the current document's domain. Can be used to share cookies across subdomains (e.g., .example.com for www.example.com and blog.example.com).
• secure: A flag that tells the browser to only send the cookie over HTTPS connections. Essential for sensitive data.
• SameSite=Strict|Lax|None: Controls when cookies are sent with cross-site requests.
  • Strict: Cookies are only sent for same-site requests.
  • Lax (default since Chrome 80): Cookies are sent with same-site requests and top-level navigations (e.g., clicking a link) but not for other third-party requests (e.g., images or iframes).
  • None: Cookies are sent with all requests, including cross-site, but must also have the Secure attribute.
• HttpOnly: (Important for security, but JavaScript cannot set or read this flag directly.) This attribute prevents client-side scripts from accessing the cookie. It's typically set by the server to protect against XSS attacks, as it makes session cookies inaccessible to JavaScript.

Here's a utility function to set a cookie with various options:

function setCookie(name, value, options = {}) {
    options = {
        path: '/', // Default path to make it available site-wide
        ...options
    };

    if (options.expires instanceof Date) {
        options.expires = options.expires.toUTCString();
    }

    let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);

    for (let optionKey in options) {
        updatedCookie += "; " + optionKey;
        let optionValue = options[optionKey];
        if (optionValue !== true) {
            updatedCookie += "=" + optionValue;
        }
    }

    document.cookie = updatedCookie;
}

// Example usage:
// Set a simple session cookie
setCookie('theme', 'dark');

// Set a cookie that expires in 7 days
const sevenDaysFromNow = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
setCookie('user_id', 'js-dev-123', { expires: sevenDaysFromNow, path: '/', secure: true });

// Set a cookie with max-age (1 hour)
setCookie('welcome_message_shown', 'true', { 'max-age': 3600 }); // 3600 seconds = 1 hour

// Set a cookie for a specific subdomain (if on parent domain)
// setCookie('locale', 'en-US', { domain: '.example.com' });
    

Deleting Cookies

To delete a cookie, you simply set it again with the same name and path, but with an expires date in the past, or a max-age of 0. It's crucial that the domain and path attributes match those of the cookie you intend to delete.

function deleteCookie(name, options = {}) {
    setCookie(name, '', {
        ...options,
        'max-age': 0
    });
}

// Example usage:
// Delete the 'theme' cookie
deleteCookie('theme');

// Delete the 'user_id' cookie (must match original path and other attributes)
deleteCookie('user_id', { path: '/', secure: true });
    

Cookie Security and Best Practices

While essential, cookies also pose security and privacy considerations.

• Use Secure: Always use the Secure attribute for cookies that carry sensitive information (like session IDs) to ensure they are only sent over HTTPS.
• Use HttpOnly (server-side): For cookies holding session identifiers, ensure they are set with the HttpOnly attribute by the server. This prevents JavaScript from accessing them, significantly mitigating the risk of session hijacking via Cross-Site Scripting (XSS) attacks.
• Use SameSite: Implement the SameSite attribute to protect against Cross-Site Request Forgery (CSRF) attacks. Lax is often a good default, while Strict offers more protection at the cost of some user experience edge cases. Remember None requires Secure.
• Avoid Sensitive Data: Never store highly sensitive information (like passwords, credit card numbers, or personally identifiable information) directly in cookies, even if they are secured. If such data must be associated with a session, store it server-side and only use a secure session ID in the cookie.
• Cookie Size Limits: Browsers generally limit the size of an individual cookie (around 4KB) and the total number of cookies per domain (around 20-50). Don't try to store large amounts of data in cookies.
• User Consent: Be mindful of privacy regulations like GDPR and CCPA. For non-essential cookies (especially those used for tracking or analytics), obtain explicit user consent before setting them.

Alternatives to Cookies

For client-side data storage, especially when you need more space or a different scope, consider these alternatives:

• localStorage: Provides a way to store data with no expiration time. Data persists even when the browser is closed and reopened. It offers much more space (typically 5MB-10MB).
• sessionStorage: Similar to localStorage, but data is cleared when the browser tab/window is closed. Ideal for temporary, session-specific data.
• IndexedDB: A low-level API for client-side storage of large amounts of structured data, including files/blobs. It provides a powerful database-like interface.

Conclusion

Cookies are an indispensable part of web development, enabling statefulness and personalization in a stateless world. Understanding how to effectively read, write, and delete them using JavaScript, along with their various attributes, is crucial for building robust and secure web applications. Always prioritize security attributes like Secure and SameSite, and be aware of privacy implications and regulatory requirements. For larger data storage needs, consider modern alternatives like localStorage or IndexedDB.