How to list all the cookies of the current page using JavaScript ?

The task is to get all the cookies stored in current domain (We can not get all cookies due to security reasons). There are two methods to solve this problem which are discussed below:

Approach 1:

  • Access the cookies using document.cookie.
  • Use .split() method to split them on “;” to get an array of cookies.
  • Traverse the array of cookies.
  • Append the all cookies one by one in a string for print.

Example: This example implements the above approach.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to list all cookies
        for the current page?
    </title>
      
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color: green"
        GeeksForGeeks 
    </h1>
      
    <p id="GFG_UP" style=
        "font-size: 20px; font-weight: bold;">
    </p>
      
    <button onclick="gfg_Run()">
        Click Here
    </button>
      
    <p id="GFG_DOWN" style="color:green;
        font-size: 26px; font-weight: bold;">
    </p>
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML = "Click on the button to "
                        + "get the stored cookies.";
  
        function getCookies() {
            var cookies = document.cookie.split(';');
            var ret = '';
            for (var i = 1; i <= cookies.length; i++) {
                ret += i + ' - ' + cookies[i - 1] + "<br>";
            }
            return ret;
        }
  
        function gfg_Run() {
            el_down.innerHTML = getCookies();
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Approach 2:



  • Access the cookies using document.cookie.
  • Use .split() method to split them on “;” to get an array of cookies.
  • Use .reduce() method and access each cookies one by one.
  • To get the name and value of the cookie. For each cookie, split it on “=” using .split() method and access the Name and Value from the cookie.
  • This method does the same thing as previous method and returns the cookies as an object.

Example: This example implements the above approach.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to list all cookies
        for the current page?
    </title>
      
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color: green"
        GeeksForGeeks 
    </h1>
      
    <p id="GFG_UP" style=
        "font-size: 20px; font-weight: bold;">
    </p>
      
    <button onclick="gfg_Run()">
        Click Here
    </button>
      
    <p id="GFG_DOWN" style="color:green;
        font-size: 26px; font-weight: bold;">
    </p>
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML = "Click on the button "
                        + "to get the stored cookies.";
  
        function gfg_Run() {
            var cookies = 
                document.cookie.split(';').reduce(
                                (cookies, cookie) => {
                    const [name, val] = cookie.split(
                                '=').map(c => c.trim());
                      
                    cookies[name] = val;
                    return cookies;
                }, {});
            el_down.innerHTML = JSON.stringify(cookies);
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.