How do I work with cookies in JavaScript?

Cookies, those small pieces of data stored on a user’s device, are fundamental to web development. They enable developers to store and retrieve information, track user sessions, and provide personalised experiences. JavaScript plays a crucial role in manageing cookies on the client side. In this comprehensive guide, we’ll explore how to work with cookies in JavaScript, including creating, reading, updating, and deleting them to enhance your web applications.

Understanding Cookies

Cookies are text files stored in a user’s web browser when they interact with a website. These cookies contain data that the website can retrieve and use to remember user preferences, maintain user sessions, and more. Cookies are an essential component of web development, enabling various functionalities such as:

• User Authentication: Cookies can store authentication tokens or session identifiers to keep users logged in.
• Remembering User Preferences: Websites can remember user settings like language preferences or theme choices.
• Tracking User Behaviour: Cookies can be used for analytics and tracking user interactions.
• Shopping Carts: E-commerce sites use cookies to store items in a user’s shopping cart.

Creating Cookies in JavaScript

To create a cookie in JavaScript, you use the document.cookie property. Cookies are typically set as strings with a name-value pair, but you can also specify additional attributes like expiration date and path. Here’s how you create a basic cookie:

document.cookie = "username=John";

This code sets a cookie named “username” with the value “John.” However, this cookie will have some default attributes, like no expiration date and a path of “/” (meaning it’s accessible on the entire website).

If you want to set additional attributes, such as an expiration date, you can do so like this:

const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7); // Expires in 7 days

document.cookie = username=John; expires=${expirationDate.toUTCString()}; path=/;

Reading Cookies in JavaScript

To read cookies, you can access the document.cookie property, which returns all the cookies associated with the current page as a single string. You can then parse this string to find the specific cookie you’re interested in. Here’s an example:

function getCookie(cookieName) {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].trim();
        if (cookie.startsWith(cookieName + '=')) {
            return cookie.substring(cookieName.length + 1);
        }
    }
    return null; // Cookie not found
}

const username = getCookie('username');
if (username) {
    console.log(Welcome back, ${username}!);
} else {
    console.log('No username cookie found.');
}

This code defines a getCookie function that searches for a specific cookie by name.

Updating Cookies in JavaScript

To update a cookie, you can simply set it again with a new value or updated attributes. For example, if you want to change the value of the “username” cookie:

document.cookie = "username=Jane";

This will update the “username” cookie with the new value “Jane.”

Deleting Cookies in JavaScript

Deleting a cookie is done by setting its expiration date to a past time. This effectively removes the cookie from the user’s browser. Here’s how you can delete a cookie:

function deleteCookie(cookieName) {
    const expirationDate = new Date(0); // Set the date to the past
    document.cookie = ${cookieName}=; expires=${expirationDate.toUTCString()}; path=/;
}

deleteCookie('username');

The deleteCookie function sets the expiration date of the cookie to a past date, causing it to be deleted.

Handling Cookies Securely

While cookies are powerful, it’s essential to handle them securely to protect user data and privacy. Here are some best practices:

1. Use Secure and HTTP-Only Flags: For sensitive cookies, set the “Secure” flag to ensure they are only sent over HTTPS connections. Additionally, use the “HttpOnly” flag to prevent JavaScript access, enhancing security.
2. Validate Cookie Data: Always validate and sanitise cookie data on the server side to prevent malicious input.
3. Use Session Cookies: For user authentication, use session cookies that expire when the user logs out or closes the browser.
4. Limit Cookie Size: Keep cookies as small as possible to reduce data transfer and improve website performance.
5. Inform Users: Inform users about cookie usage and provide options to manage or opt out of tracking.

Libraries for Cookie Management

While working with cookies directly in JavaScript is possible, you can also use JavaScript libraries like “js-cookie” or “universal-cookie” to simplify cookie management. These libraries offer easy-to-use APIs for creating, reading, updating, and deleting cookies.

Conclusion

Cookies are a fundamental part of web development, enabling websites to remember user preferences, manage sessions, and deliver personalised experiences. In JavaScript, manageing cookies involves creating, reading, updating, and deleting them using the document.cookie property. By understanding the principles of cookie management and adhering to best practices for security and privacy, you can harness the power of cookies to enhance the functionality and user experience of your web applications.