Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Difficulty Level : Basic
  • Last Updated : 24 Nov, 2021

In this article, we will know to get the list of all the cookies for the current page in Javascript, along with understanding their implementation through the examples. The task is to retrieve the cookies stored in the 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 the .split() method to split them on “;” to get an array of cookies.
  • Traverse the array of cookies.
  • Append all cookies one by one in a string for print.

Example: This example implements the above approach.

HTML




<!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>

Output:

Getting the stored cookies using Javascript

Approach 2:

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

Example: This example implements the above approach.

HTML




<!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>

Output:

Getting the stored cookies using Javascript




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!