How do you get cookies in javascript?

View Discussion

Table of Contents Show

How do I get a cookie by name in JavaScript?
How do I access cookies?
How do you get cookies from a website?
What is meant by cookies in JavaScript?

Improve Article

Save Article

Read

Discuss

View Discussion

Improve Article

Save Article

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;">

<h2 style="color: green">

GeeksforGeeks

</h2>

<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;">

<h2 style="color: green">

GeeksforGeeks

</h2>

<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

cookie property..

Syntax. document. ... .

Example. document.cookie = "username=jai;.

Geta cookie by name in javascript. function getCookie(cookieName) { let cookie = {}; document.cookie.split(';').forEach(function(el) { let [key,value] = el.split('='); cookie[key.trim()] = value; }) return cookie[cookieName]; }.

How do I access cookies?

Change your cookie settings.

On your computer, open Chrome ..

At the top right, click More Settings ..

Under "Privacy and security," click Cookies and other site data..

Select an option: Allow all cookies. Block all cookies (not recommended). Block third party cookies in Incognito. Block third-party cookies..

How do you get cookies from a website?

To view all the cookies stored in Chrome: Click on the three dots at the top right corner and click Settings. Select Privacy and security and click Cookies and other site data. Click See all cookies and site data.

What is meant by cookies in JavaScript?

A cookie is an amount of information that persists between a server-side and a client-side. A web browser stores this information at the time of browsing. A cookie contains the information as a string generally in the form of a name-value pair separated by semi-colons.