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
How to detect that JavaScript Cookies are disabled?
This tutorial will teach you how to detect if cookies are enabled or disabled on a website using JavaScript. Cookies are small text files stored on your computer that contain data. When a web server sends a web page to a browser, it terminates the connection and forgets about the user. Cookies solve the challenge of "how to remember information about the user" by storing data like usernames for subsequent visits.
Cookies allow you to store user information between page visits. Your server transmits certain data to the visitor's browser in the form of a cookie, which may be accepted and stored as a plain text record on the visitor's hard drive. When the visitor accesses another page on your website, the browser sends the same cookie back to the server for retrieval.
Using JavaScript, cookies can be created, retrieved, and modified directly. However, since all cookie data is sent to the server when a page is requested, cookies should not store sensitive information like passwords or credit card numbers.
Using navigator.cookieEnabled Property
The navigator.cookieEnabled property returns a Boolean value indicating whether cookies are enabled in the browser. This read-only property returns true if cookies are enabled, otherwise false.
Syntax
if (navigator.cookieEnabled) {
// Cookies are enabled
} else {
// Cookies are disabled
}
Example
Here's how to check if cookies are enabled using the navigator.cookieEnabled property:
<html>
<head>
<script type="text/javascript">
function checkCookiesStatus() {
if(navigator.cookieEnabled) {
document.getElementById("result").innerHTML = "Cookies are enabled";
} else {
document.getElementById("result").innerHTML = "Cookies are disabled";
}
}
</script>
</head>
<body onload="checkCookiesStatus()">
<h2>Check if cookies are enabled</h2>
<p id="result"></p>
</body>
</html>
Using Cookie Test Method
A more reliable approach is to actually attempt to create, read, and delete a test cookie. This method works even when navigator.cookieEnabled might be unreliable:
<html>
<head>
<script>
function testCookieSupport() {
try {
// Create a test cookie
document.cookie = "cookietest=1; path=/";
// Check if the cookie was created
var cookieEnabled = document.cookie.indexOf("cookietest=") !== -1;
// Clean up - delete the test cookie
document.cookie = "cookietest=1; expires=Thu, 01-Jan-1970 00:00:01 GMT; path=/";
return cookieEnabled;
} catch (e) {
return false;
}
}
function displayCookieStatus() {
var status = testCookieSupport() ? "enabled" : "disabled";
document.getElementById("status").innerHTML = "Cookies are " + status;
}
</script>
</head>
<body onload="displayCookieStatus()">
<h2>Cookie Support Test</h2>
<p id="status"></p>
</body>
</html>
Comparison of Methods
| Method | Reliability | Browser Support | Performance |
|---|---|---|---|
navigator.cookieEnabled |
Good | Excellent | Fast |
| Cookie Test Method | Excellent | Universal | Slightly slower |
Combined Approach
For maximum reliability, you can combine both methods:
<html>
<head>
<script>
function areCookiesEnabled() {
// First check navigator.cookieEnabled
if (navigator.cookieEnabled === false) {
return false;
}
// If navigator.cookieEnabled is true or undefined, test with actual cookie
try {
document.cookie = "testcookie=1; path=/";
var cookieEnabled = document.cookie.indexOf("testcookie=") !== -1;
document.cookie = "testcookie=1; expires=Thu, 01-Jan-1970 00:00:01 GMT; path=/";
return cookieEnabled;
} catch (e) {
return false;
}
}
function showResult() {
var enabled = areCookiesEnabled();
document.getElementById("final-result").innerHTML =
"Cookies are " + (enabled ? "enabled" : "disabled") + " in your browser.";
}
</script>
</head>
<body onload="showResult()">
<h2>Comprehensive Cookie Detection</h2>
<p id="final-result"></p>
</body>
</html>
Conclusion
Detecting cookie support is essential for web applications that rely on cookies. The navigator.cookieEnabled property provides a quick check, while the cookie test method offers the most reliable detection. Using both approaches ensures accurate detection across all browsers and scenarios.
5K+ Views
