Article Categories

Selected Reading

How to set multiple cookies in JavaScript?

Javascript Web Development Front End Technology

In JavaScript, you can set multiple cookies by calling document.cookie multiple times. Each call adds a new cookie to the browser's cookie store. Unlike other properties, document.cookie doesn't overwrite existing cookies ? it appends new ones.

Basic Syntax for Multiple Cookies

document.cookie = "cookie1=value1";
document.cookie = "cookie2=value2";
document.cookie = "cookie3=value3";

Example: Setting Multiple Cookies

Here's a complete example showing how to add, list, and remove multiple cookies:

<!DOCTYPE html>
<html>
<head>
    <script>
        var num = 1;
        
        function addCookie() {
            document.cookie = num + "=" + num;
            num++;
        }
        
        function listCookies() {
            var result = document.cookie;
            document.getElementById("list").innerHTML = result;
        }
        
        function removeCookies() {
            var res = document.cookie;
            var multiple = res.split(";");
            for(var i = 0; i < multiple.length; i++) {
                var key = multiple[i].split("=");
                document.cookie = key[0] + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
            }
        }
    </script>
</head>
<body>
    <button onclick='addCookie()'>ADD COOKIE</button><br>
    <button onclick='listCookies()'>LIST COOKIES</button><br>
    <button onclick='removeCookies()'>REMOVE ALL COOKIES</button>
    <h3>Cookies List</h3>
    <p id="list"></p>
</body>
</html>

Setting Multiple Cookies at Once

You can also create a function to set multiple cookies efficiently:

function setMultipleCookies() {
    // Set different cookies with various values
    document.cookie = "username=john_doe";
    document.cookie = "theme=dark";
    document.cookie = "language=en";
    
    // Display all cookies
    console.log("All cookies:", document.cookie);
}

setMultipleCookies();

How It Works

When you assign to document.cookie, JavaScript doesn't replace all cookies. Instead, it:

Adds the new cookie to the existing cookie collection
If a cookie with the same name exists, it updates that cookie
Stores all cookies as a semicolon-separated string

Key Points

Each document.cookie assignment adds or updates one cookie
Cookie names are case-sensitive
Cookies are automatically separated by semicolons and spaces
To remove cookies, set their expiration date to the past

Conclusion

Setting multiple cookies in JavaScript is straightforward ? simply call document.cookie multiple times. Each assignment adds a new cookie without overwriting existing ones, making it easy to manage multiple cookies in your web application.

mkotla

Updated on: 2026-03-15T23:18:59+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next