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 can I list all cookies on the current page with JavaScript?
In JavaScript, you can list all cookies on the current page using the document.cookie property. This property returns a string containing all cookies as semicolon-separated key-value pairs.
Basic Cookie Retrieval
The simplest way to get all cookies is to access document.cookie directly:
<html>
<head>
<script>
// Set some sample cookies first
document.cookie = "username=john; path=/";
document.cookie = "theme=dark; path=/";
document.cookie = "language=en; path=/";
function showAllCookies() {
var allCookies = document.cookie;
document.getElementById("result").innerHTML = "All Cookies: " + allCookies;
}
</script>
</head>
<body>
<button onclick="showAllCookies()">Show All Cookies</button>
<div id="result"></div>
</body>
</html>
Parsing Individual Cookies
To extract individual cookie names and values, you need to parse the cookie string:
<html>
<head>
<script>
function listAllCookies() {
// Set sample cookies
document.cookie = "user=alice; path=/";
document.cookie = "session=abc123; path=/";
document.cookie = "preferences=compact; path=/";
var allCookies = document.cookie;
var result = "All Cookies: " + allCookies + "<br><br>";
// Split cookies by semicolon
var cookieArray = allCookies.split(';');
result += "Individual Cookies:<br>";
for(var i = 0; i < cookieArray.length; i++) {
var cookie = cookieArray[i].trim(); // Remove whitespace
var name = cookie.split('=')[0];
var value = cookie.split('=')[1];
result += "Name: " + name + ", Value: " + value + "<br>";
}
document.getElementById("cookieList").innerHTML = result;
}
</script>
</head>
<body>
<button onclick="listAllCookies()">List All Cookies</button>
<div id="cookieList"></div>
</body>
</html>
Improved Cookie Parser Function
Here's a more robust function that handles edge cases and returns cookies as an object:
<html>
<head>
<script>
function getAllCookies() {
var cookies = {};
if (document.cookie && document.cookie !== '') {
var cookieArray = document.cookie.split(';');
for (var i = 0; i < cookieArray.length; i++) {
var cookie = cookieArray[i].trim();
var parts = cookie.split('=');
var name = parts[0];
var value = parts.slice(1).join('='); // Handle values with '='
cookies[name] = decodeURIComponent(value || '');
}
}
return cookies;
}
function displayCookies() {
// Set sample cookies
document.cookie = "email=user@example.com; path=/";
document.cookie = "role=admin; path=/";
var cookies = getAllCookies();
var result = "Cookies as Object:<br>";
for (var name in cookies) {
result += name + " = " + cookies[name] + "<br>";
}
document.getElementById("output").innerHTML = result;
}
</script>
</head>
<body>
<button onclick="displayCookies()">Display Cookies</button>
<div id="output"></div>
</body>
</html>
Key Points
-
document.cookiereturns all cookies as a single string - Cookies are separated by semicolons and spaces
- Each cookie is in "name=value" format
- Always use
trim()to remove whitespace - Use
decodeURIComponent()for proper value decoding
Conclusion
Use document.cookie to access all cookies on the current page. Parse the string by splitting on semicolons to extract individual cookie names and values for better control.
Updated on: 2026-03-15T23:18:59+05:30
1K+ Views
Advertisements