JavaScript Cookies

Store and retrieve user data in the browser

🍪 What are Cookies?

Cookies are small pieces of data stored in the user's browser. They help websites remember information about users between visits. 


// Set a cookie
document.cookie = "username=John";

// Get all cookies
console.log(document.cookie);

// Set cookie with expiration
document.cookie = "theme=dark; expires=Thu, 18 Dec 2024 12:00:00 UTC";

Output:

username=John; theme=dark

Cookie Operations

📝

Create

Set new cookies 

document.cookie = "name=value"
📖

Read

Get cookie values 

document.cookie
✏️

Update

Change cookie values 

document.cookie = "name=newValue"
🗑️

Delete

Remove cookies 

expires=Thu, 01 Jan 1970

🔹 Creating Cookies

Set cookies with different options: 

// Simple cookie
document.cookie = "username=John";

// Cookie with expiration date
let expires = new Date();
expires.setTime(expires.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
document.cookie = "theme=dark; expires=" + expires.toUTCString();

// Cookie with path and domain
document.cookie = "language=en; path=/; domain=.example.com";

// Secure cookie (HTTPS only)
document.cookie = "sessionId=abc123; secure; httpOnly";

// Cookie with all options
document.cookie = "userPrefs=settings; expires=" + expires.toUTCString() + "; path=/; secure";

Output:

Cookies are set in the browser

🔹 Reading Cookies

Get cookie values from the browser: 

// Get all cookies
console.log(document.cookie);

// Function to get specific cookie
function getCookie(name) {
    let nameEQ = name + "=";
    let cookies = document.cookie.split(';');
    
    for (let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i];
        while (cookie.charAt(0) === ' ') {
            cookie = cookie.substring(1, cookie.length);
        }
        if (cookie.indexOf(nameEQ) === 0) {
            return cookie.substring(nameEQ.length, cookie.length);
        }
    }
    return null;
}

// Usage
let username = getCookie("username");
console.log("Username: " + username);

let theme = getCookie("theme");
console.log("Theme: " + theme);

Output:

username=John; theme=dark; language=en

Username: John

Theme: dark

🔹 Updating and Deleting Cookies

Modify or remove existing cookies: 

// Update cookie (just set it again)
document.cookie = "username=Jane";
console.log("Updated username: " + getCookie("username"));

// Delete cookie (set expiration to past date)
function deleteCookie(name) {
    document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

// Delete specific cookies
deleteCookie("username");
deleteCookie("theme");

console.log("After deletion: " + document.cookie);

// Check if cookie exists
function cookieExists(name) {
    return getCookie(name) !== null;
}

console.log("Username exists: " + cookieExists("username"));
console.log("Language exists: " + cookieExists("language"));

Output:

Updated username: Jane

After deletion: language=en

Username exists: false

Language exists: true

🔹 Practical Cookie Manager

Complete cookie management system: 

// Cookie Manager Object
const CookieManager = {
    // Set cookie with options
    set: function(name, value, days = 7, path = "/") {
        let expires = "";
        if (days) {
            let date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + value + expires + "; path=" + path;
    },
    
    // Get cookie value
    get: function(name) {
        let nameEQ = name + "=";
        let cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            let cookie = cookies[i].trim();
            if (cookie.indexOf(nameEQ) === 0) {
                return cookie.substring(nameEQ.length);
            }
        }
        return null;
    },
    
    // Delete cookie
    delete: function(name, path = "/") {
        document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=" + path;
    },
    
    // Get all cookies as object
    getAll: function() {
        let cookies = {};
        let cookieArray = document.cookie.split(';');
        for (let cookie of cookieArray) {
            let [name, value] = cookie.trim().split('=');
            if (name && value) {
                cookies[name] = value;
            }
        }
        return cookies;
    }
};

// Usage examples
CookieManager.set("user", "John", 30);
CookieManager.set("preferences", "dark-theme", 365);

console.log("User: " + CookieManager.get("user"));
console.log("All cookies:", CookieManager.getAll());

CookieManager.delete("user");
console.log("After deletion: " + CookieManager.get("user"));

Output:

User: John

All cookies: {user: "John", preferences: "dark-theme"}

After deletion: null

🧠 Test Your Knowledge

How do you delete a cookie in JavaScript?