How much data can I store in JavaScript cookies?

JavaScript cookies have size and quantity limits that vary by browser. Understanding these constraints is essential for effective web storage planning.

Cookie Storage Limits by Browser

Each browser imposes different limits on cookie storage. Here are the current limitations:

Testing Cookie Size Limits

Here's how to test cookie size limits in your browser:

// Test maximum cookie size
function testCookieSize() {
    let testData = "x";
    let maxSize = 0;
    
    // Try increasing sizes until cookie fails
    for (let i = 1; i 

Practical Cookie Usage Example

// Set a cookie with user preferences
function setUserPreferences() {
    const preferences = {
        theme: "dark",
        language: "en",
        notifications: true
    };
    
    const cookieValue = JSON.stringify(preferences);
    document.cookie = "userPrefs=" + cookieValue + "; expires=Fri, 31 Dec 2024 23:59:59 UTC; path=/";
    
    console.log("Cookie size: " + cookieValue.length + " bytes");
    console.log("Cookie set: " + cookieValue);
}

// Get cookie data
function getUserPreferences() {
    const cookies = document.cookie.split(';');
    
    for (let cookie of cookies) {
        const [name, value] = cookie.trim().split('=');
        if (name === 'userPrefs') {
            return JSON.parse(value);
        }
    }
    return null;
}

setUserPreferences();
const prefs = getUserPreferences();
console.log("Retrieved preferences:", prefs);


Best Practices for Cookie Storage

• Keep cookies small: Aim for under 1KB per cookie for better performance
• Use compression: Store IDs that reference server-side data instead of large objects
• Consider alternatives: Use localStorage or sessionStorage for larger data requirements
• Set expiration dates: Prevent unnecessary cookie accumulation

When Cookies Reach Limits

When cookies exceed browser limits:

• Oldest cookies may be automatically deleted
• New cookies may fail to set silently
• Browser performance can degrade

// Check if cookie was set successfully
function setCookieSafely(name, value) {
    const beforeCount = document.cookie.split(';').length;
    document.cookie = name + "=" + value;
    const afterCount = document.cookie.split(';').length;
    
    if (afterCount > beforeCount || document.cookie.indexOf(name + "=" + value) !== -1) {
        console.log("Cookie set successfully");
        return true;
    } else {
        console.log("Cookie failed to set - may have hit size limit");
        return false;
    }
}

setCookieSafely("testCookie", "some value");

Conclusion

JavaScript cookies are limited to around 4KB per cookie with varying quantity limits per domain. For larger storage needs, consider localStorage, sessionStorage, or server-side storage solutions instead of cookies.