Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML Navigator cookieEnabled Property
The navigator.cookieEnabled property is a read-only property that returns a boolean value indicating whether HTTP cookies are enabled in the user's browser. This property returns true if cookies are enabled and false if they are disabled.
This property is useful for web developers to check cookie support before attempting to set or read cookies, ensuring better user experience and preventing errors in cookie-dependent functionality.
Syntax
Following is the syntax for the navigator cookieEnabled property −
navigator.cookieEnabled
Return Value
The property returns a boolean value −
-
true− If cookies are enabled in the browser -
false− If cookies are disabled in the browser
Example − Basic Cookie Detection
Following example demonstrates how to check if cookies are enabled in the browser −
<!DOCTYPE html>
<html>
<head>
<title>Navigator cookieEnabled Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Cookie Support Detection</h2>
<button onclick="checkCookies()" style="background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">Check Cookie Support</button>
<p id="result" style="margin-top: 20px; font-size: 16px;"></p>
<script>
function checkCookies() {
var result = document.getElementById("result");
if (navigator.cookieEnabled) {
result.innerHTML = "? Cookies are enabled in your browser.";
result.style.color = "green";
} else {
result.innerHTML = "? Cookies are disabled in your browser.";
result.style.color = "red";
}
}
</script>
</body>
</html>
The output will display whether cookies are enabled or disabled −
Cookie Support Detection [Check Cookie Support] ? Cookies are enabled in your browser. (if enabled) OR ? Cookies are disabled in your browser. (if disabled)
Example − Conditional Cookie Usage
Following example shows how to use the cookieEnabled property to conditionally set cookies −
<!DOCTYPE html>
<html>
<head>
<title>Conditional Cookie Setting</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Preference Storage</h2>
<input type="text" id="username" placeholder="Enter your name" style="padding: 8px; margin: 10px;">
<button onclick="savePreference()" style="background: #28a745; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">Save Preference</button>
<button onclick="loadPreference()" style="background: #17a2b8; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">Load Preference</button>
<p id="message" style="margin-top: 15px; font-weight: bold;"></p>
<script>
function savePreference() {
var message = document.getElementById("message");
var username = document.getElementById("username").value;
if (navigator.cookieEnabled) {
document.cookie = "username=" + username + "; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";
message.innerHTML = "Preference saved successfully!";
message.style.color = "green";
} else {
message.innerHTML = "Cannot save preference - cookies are disabled.";
message.style.color = "red";
}
}
function loadPreference() {
var message = document.getElementById("message");
if (navigator.cookieEnabled) {
var cookies = document.cookie.split(';');
var username = "";
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf("username=") === 0) {
username = cookie.substring("username=".length);
break;
}
}
if (username) {
document.getElementById("username").value = username;
message.innerHTML = "Preference loaded: " + username;
message.style.color = "blue";
} else {
message.innerHTML = "No saved preference found.";
message.style.color = "orange";
}
} else {
message.innerHTML = "Cannot load preference - cookies are disabled.";
message.style.color = "red";
}
}
</script>
</body>
</html>
This example demonstrates practical usage where cookie operations are only attempted when cookies are supported.
Example − Browser Information Display
Following example shows comprehensive browser cookie information −
<!DOCTYPE html>
<html>
<head>
<title>Browser Cookie Information</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f8f9fa;">
<div style="max-width: 600px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<h2 style="color: #333; text-align: center;">Browser Cookie Support Information</h2>
<button onclick="displayInfo()" style="background: #007bff; color: white; padding: 12px 24px; border: none; border-radius: 6px; cursor: pointer; display: block; margin: 0 auto;">Show Cookie Information</button>
<div id="info" style="margin-top: 20px;"></div>
</div>
<script>
function displayInfo() {
var info = document.getElementById("info");
var cookieStatus = navigator.cookieEnabled;
info.innerHTML = `
<div style="background: #e9ecef; padding: 15px; border-radius: 5px;">
<h3 style="margin-top: 0; color: #495057;">Cookie Support Status</h3>
<p><strong>Cookies Enabled:</strong> ${cookieStatus ? '? Yes' : '? No'}</p>
<p><strong>Browser:</strong> ${navigator.userAgent.split(' ')[0]}</p>
<p><strong>Platform:</strong> ${navigator.platform}</p>
<p><strong>Recommendation:</strong> ${cookieStatus ? 'Your browser supports cookies for enhanced functionality.' : 'Enable cookies for better website experience.'}</p>
</div>
`;
}
</script>
</body>
</html>
The output displays comprehensive browser information including cookie support status −
Browser Cookie Support Information [Show Cookie Information] Cookie Support Status Cookies Enabled: ? Yes Browser: Mozilla/5.0 Platform: Win32 Recommendation: Your browser supports cookies for enhanced functionality.
Browser Compatibility
The navigator.cookieEnabled property is widely supported across all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been available since the early versions of JavaScript and provides consistent behavior across different platforms.
Note: In some older browsers or specific privacy modes, this property might not accurately reflect the actual cookie behavior. It's recommended to test actual cookie setting and reading for critical applications.
Common Use Cases
- Form validation − Check cookie support before storing form data
- User preferences − Conditionally save user settings in cookies
- Session management − Verify cookie support for login functionality
- Analytics − Determine if tracking cookies can be used
- Error handling − Display appropriate messages when cookies are disabled
Conclusion
The navigator.cookieEnabled property is a simple yet essential tool for detecting cookie support in web browsers. It returns true when cookies are enabled and false when disabled, allowing developers to build more robust web applications that gracefully handle different browser configurations.
199 Views
