Cookies are small data files stored on a user’s browser to retain information like session data, preferences, and login details. While setting and retrieving cookies is common, there are situations where you may need to delete cookies—such as when a user logs out or clears their preferences.

In this blog, we will discuss how to delete cookies in JavaScript, along with examples and best practices.

Understanding Cookies in JavaScript

Cookies are stored as key-value pairs in the browser and can be created, read, and deleted using JavaScript’s document.cookie property.

Syntax for Creating a Cookie:

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2025 23:59:59 UTC; path=/";

• "username=JohnDoe" → The key-value pair
• "expires=Fri, 31 Dec 2025 23:59:59 UTC" → Expiration date (optional)
• "path=/" → Defines where the cookie is accessible

Deleting a Cookie in JavaScript

Unlike other storage mechanisms, JavaScript does not have a direct method to delete cookies. However, cookies can be deleted by setting their expiration date to a past time.

Syntax for Deleting a Cookie:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

• The cookie’s value is set to an empty string ("").
• The expires date is set to Jan 1, 1970, a time before the present moment.
• The path should match the path of the original cookie.

Example: Deleting a Specific Cookie

function deleteCookie(cookieName) {
    document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
}

// Usage
deleteCookie("username");

This function takes a cookie name and deletes it by setting its expiration date to the past.

Deleting Cookies with JavaScript and Multiple Paths

Cookies may have been set with different paths. If a cookie was created with a specific path, you must delete it using the same path.

Example: Deleting a Cookie from Multiple Paths

document.cookie = "sessionID=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
document.cookie = "sessionID=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/admin";

Here, we delete the sessionID cookie from both the root (/) and /admin paths.

Deleting All Cookies Using JavaScript

Since document.cookie does not provide a built-in method to remove all cookies, we need to loop through all cookies and delete them one by one.

Example: Delete All Cookies

function deleteAllCookies() {
    let cookies = document.cookie.split(";");

    for (let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i];
        let eqPos = cookie.indexOf("=");
        let name = eqPos > -1 ? cookie.substring(0, eqPos) : cookie;
        document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
    }
}

// Usage
deleteAllCookies();

This function:
✔ Retrieves all cookies
✔ Extracts their names
✔ Deletes each one by setting its expiration date to the past

Best Practices for Deleting Cookies

✔ Ensure the correct path: If a cookie was set with a specific path, it must be deleted with the same path.
✔ Check for HttpOnly and Secure flags: Cookies with the HttpOnly or Secure attributes cannot be deleted via JavaScript.
✔ Use document.cookie carefully: Modifying document.cookie only affects client-side cookies.

Conclusion

Deleting cookies in JavaScript requires setting an expiration date in the past. While JavaScript provides basic control over cookies, managing them effectively requires understanding paths, security settings, and browser behavior.

By using the methods discussed, you can efficiently delete specific cookies or clear all cookies when needed.

🚀 Have you used cookies in your JavaScript projects? Let us know in the comments!