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

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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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
bhaskargeeksforgeeks
JavaScript-Questions
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Roadmap to Become a Web Developer in 2022
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Installation of Node.js on Linux
Convert a string to an integer in JavaScript