How can I list all cookies for the current page with Javascript?

Updated for 2022

tl;dr - Here's a one liner:

Object.fromEntries(document.cookie.split('; ').map(c => c.split('=')))

Note: You cannot get http-only cookies in browser code.

Here's the same thing, explained:

const getCookieMap = () => {
  // Cookies are generally separated by a "; "
  // https://stackoverflow.com/a/4843598/2968465
  const cookieList = document.cookie.split('; ');

  // A key-value pair in the cookie list is separated by a "="
  // We pass a function to cookieList.map that will return
  // an array of tuples, like [key, value]
  const cookieToObjEntry = cookie => cookie.split('=')
  const cookieEntries = cookieList.map(cookieToObjEntry)

  // Such an array can be passed to Object.fromEntries to
  // obtain an object with all cookie key-value pairs as
  // the keys and values of an object
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries
  return Object.fromEntries(cookieEntries)

  // So, for a cookies stored as "c1=v1; c2=v2", you'll get
  // an object like `{c1: v1, c2: v2}`
}

Older answers

Many people have already mentioned that document.cookie gets you all the cookies (except http-only ones).

I'll just add a snippet to keep up with the times.

document.cookie.split(';').reduce((cookies, cookie) => {
  const [ name, value ] = cookie.split('=').map(c => c.trim());
  cookies[name] = value;
  return cookies;
}, {});

The snippet will return an object with cookie names as the keys with cookie values as the values.

Slightly different syntax:

document.cookie.split(';').reduce((cookies, cookie) => {
  const [ name, value ] = cookie.split('=').map(c => c.trim());
  return { ...cookies, [name]: value };
}, {});

Edit: Someone correctly pointed out that you'll face issues if your cookie key or value has an = in it. Maybe consider using escape sequences to mitigate this?

For just quickly viewing the cookies on any particular page, I keep a favorites-bar "Cookies" shortcut with the URL set to:

javascript:window.alert(document.cookie.split(';').join(';\r\n'));

function listCookies() {
    let cookies = document.cookie.split(';')
    cookies.map((cookie, n) => console.log(`${n}:`, decodeURIComponent(cookie)))
}

function findCookie(e) {
  let cookies = document.cookie.split(';')
  cookies.map((cookie, n) => cookie.includes(e) && console.log(decodeURIComponent(cookie), n))
}

This is specifically for the window you're in. Tried to keep it clean and concise.

Some cookies, such as referrer urls, have = in them. As a result, simply splitting on = will cause irregular results, and the previous answers here will breakdown over time (or immediately depending on your depth of use).

This takes only the first instance of the equals sign. It returns an object with the cookie's key value pairs.

// Returns an object of key value pairs for this page's cookies
function getPageCookies(){

    // cookie is a string containing a semicolon-separated list, this split puts it into an array
    var cookieArr = document.cookie.split(";");

    // This object will hold all of the key value pairs
    var cookieObj = {};

    // Iterate the array of flat cookies to get their key value pair
    for(var i = 0; i < cookieArr.length; i++){

        // Remove the standardized whitespace
        var cookieSeg = cookieArr[i].trim();

        // Index of the split between key and value
        var firstEq = cookieSeg.indexOf("=");

        // Assignments
        var name = cookieSeg.substr(0,firstEq);
        var value = cookieSeg.substr(firstEq+1);
        cookieObj[name] = value;
   }
   return cookieObj;
}

I found this code on https://electrictoolbox.com/javascript-get-all-cookies/, which worked for me better than the other solutions:

function get_cookies_array() {

    var cookies = { };

    if (document.cookie && document.cookie != '') {
        var split = document.cookie.split(';');
        for (var i = 0; i < split.length; i++) {
            var name_value = split[i].split("=");
            name_value[0] = name_value[0].replace(/^ /, '');
            cookies[decodeURIComponent(name_value[0])] = decodeURIComponent(name_value[1]);
         }
     }

     return cookies;
}

Besides document.cookie you can use the cookie store API, mainly getAll() method of CookieStore.

Here's a simple example, you can do something like:

const cookies = await cookieStore.getAll(); //Array of all available cookie info
cookies.forEach(c => console.log(`${c.name}: ${c.value}`));

Please note that this API is still experimental and not supported by all browsers (e.g. Firefox) as of the time of writing this.