How to Clear all Cookies using JavaScript?

Last Updated : 14 Oct, 2024

Cookies allow clients and servers to exchange information via HTTP, enabling state management despite HTTP being a stateless protocol. When a server sends a response, it can pass data to the user's browser in the form of key-value pairs, which the browser stores as cookies. On subsequent requests to the domain, the browser includes this cookie information in the HTTP request header. This process helps retain login details, preferences, and other user-specific information to improve the user experience.

Cookies have an expiration date set with the "expires" attribute, after which they are automatically deleted. By modifying the expiry to a past date, cookies can be deleted. The document.cookie property in the DOM allows access and management of cookies, returning a string of all cookies associated with the current document.

Syntax:

document.cookie = "key=value";

Example: The code below illustrates how cookies can be deleted using JavaScript. The code is run on an online editor to demonstrate that only cookies created by your site can be deleted by the code.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        Clear cookies using Javascript
    </title>
</head>

<body>

    <script type="text/javascript">
        document.cookie = "1P_JAR=akjdsbJKHdjhbk";
        document.cookie = "CONSENT=YES+IN.en+20170903-09-0";

        function displayCookies() {

            let displayCookies = document.getElementById("display");
            displayCookies.innerHTML = document.cookie;
        }

        function deleteCookies() {
            let allCookies = document.cookie.split(';');

            // The "expire" attribute of every cookie is 
            // Set to "Thu, 01 Jan 1970 00:00:00 GMT"
            for (let i = 0; i < allCookies.length; i++)
                document.cookie = allCookies[i] + "=;expires="
                    + new Date(0).toUTCString();

            displayCookies.innerHTML = document.cookie;

        }
    </script>
    <button onclick="displayCookies()">Display Cookies</button>
    <button onclick="deleteCookies()">Delete Cookies</button>
    <p id="display"></p>
</body>

</html>