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
Selected Reading
How to list down all the cookies by name using JavaScript?
To list all cookies by name in JavaScript, you access the document.cookie property, split it into individual cookie pairs, and extract the name-value pairs from each cookie.
How document.cookie Works
The document.cookie property returns all cookies as a single string, with each cookie separated by semicolons. For example: "name1=value1; name2=value2; name3=value3".
Method 1: Basic Cookie Listing
Here's a simple approach to list all cookies by splitting the cookie string:
<html>
<head>
<script>
function ReadCookie() {
var allcookies = document.cookie;
document.write("All Cookies: " + allcookies + "<br><br>");
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i = 0; i < cookiearray.length; i++) {
name = cookiearray[i].split('=')[0].trim();
value = cookiearray[i].split('=')[1];
document.write("Key is: " + name + " and Value is: " + value + "<br>");
}
}
</script>
</head>
<body>
<form name="myform" action="">
<p>Click the following button to see all cookies:</p>
<input type="button" value="Get Cookies" onclick="ReadCookie()"/>
</form>
</body>
</html>
Method 2: Modern Approach with Console Output
A more modern approach using console.log() for better debugging:
<html>
<head>
<script>
function listAllCookies() {
const allCookies = document.cookie;
if (!allCookies) {
console.log("No cookies found");
return;
}
console.log("All cookies:", allCookies);
console.log("\nIndividual cookies:");
const cookieArray = allCookies.split(';');
cookieArray.forEach((cookie, index) => {
const [name, value] = cookie.split('=');
console.log(`${index + 1}. Name: ${name.trim()}, Value: ${value || 'undefined'}`);
});
}
// Set some test cookies first
function setTestCookies() {
document.cookie = "username=john_doe";
document.cookie = "theme=dark";
document.cookie = "language=en";
console.log("Test cookies set!");
}
</script>
</head>
<body>
<button onclick="setTestCookies()">Set Test Cookies</button>
<button onclick="listAllCookies()">List All Cookies</button>
<p>Check the browser console (F12) for output</p>
</body>
</html>
Method 3: Function to Get Cookie Names Only
If you only need the cookie names (not values), here's a targeted function:
<html>
<head>
<script>
function getCookieNames() {
const cookies = document.cookie.split(';');
const cookieNames = cookies.map(cookie => {
return cookie.split('=')[0].trim();
}).filter(name => name !== '');
console.log("Cookie names:", cookieNames);
document.getElementById('result').innerHTML =
"Cookie names: " + cookieNames.join(', ');
return cookieNames;
}
</script>
</head>
<body>
<button onclick="getCookieNames()">Get Cookie Names</button>
<p id="result"></p>
</body>
</html>
Key Points
-
document.cookiereturns all cookies as a semicolon-separated string - Use
split(';')to separate individual cookies - Use
split('=')to separate cookie names from values - Always use
trim()to remove whitespace from cookie names - Handle cases where cookies might be empty or undefined
Conclusion
Listing cookies by name involves splitting the document.cookie string and parsing each name-value pair. Use trim() for clean names and handle empty cookies gracefully.
Updated on: 2026-03-15T23:18:59+05:30
316 Views
Advertisements