How to Set & Retrieve Cookies using JavaScript ?
Last Updated :
13 Mar, 2024
In JavaScript, setting and retrieving the cookies is an important task for assessing small pieces of data on a user's browser. This cookie can be useful for storing user preferences, session information, and many more tasks.
Using document.cookie
In this approach, we are using the document.cookie property to both set and retrieve cookies. When setting a cookie, we assign a string formatted as "name=value" to document.cookie, and to retrieve cookies, we split the cookie string and parse it into a key-value map.
Syntax:
document.cookie = "username=name;
expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
Example: The below example uses document.cookie to set and retrieve cookies using JavaScript.
HTML
<!DOCTYPE html>
<head>
<title>Example 1</title>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Using document.cookie</h3>
<input type="text" id="uInput"
placeholder="Enter cookie value">
<button onclick="setFn()">
Set Cookie
</button>
<button onclick="getFn()">
Get Cookie
</button>
<p id="cookieVal"></p>
<script>
function setFn() {
const value =
document.getElementById('uInput').value;
document.cookie =
`exampleCookie=${value}`;
alert('Cookie has been set!');
}
function getFn() {
const cookies =
document.cookie.split('; ');
const cookieMap = {};
cookies.forEach(cookie => {
const [name, value] = cookie.split('=');
cookieMap[name] = value;
});
const cookieVal = cookieMap['exampleCookie'];
document.getElementById('cookieVal').textContent =
`Cookie Value: ${cookieVal}`;
}
</script>
</body>
</html>
Output:
Using js-cookie library
In this approach, we are using the js-cookie library, which provides a simple way to manage cookies in JavaScript. This library has methods like Cookies.set() and Cookies.get() to easily set and retrieve cookies.
CDN Link:
Add this CDN link to your HTML document to use js-cookie library.
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js">
</script>
Syntax:
Cookies.set('cookie-name', value);
const cVal = Cookies.get('cookie- name');Example: The below example uses js-cookie library to set and retrieve cookies using JavaScript.
JavaScript
<!DOCTYPE html>
<head>
<title>Example 2</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Using js-cookie library</h3>
<input type="text" id="uInput"
placeholder="Enter cookie value">
<button onclick="setFn()">
Set Cookie
</button>
<button onclick="getFn()">
Get Cookie
</button>
<p id="cVal"></p>
<script>
function setFn() {
const value = document.
getElementById('uInput').value;
Cookies.set('newCookie', value);
alert('Cookie has been set!');
}
function getFn() {
const cVal = Cookies.get('newCookie');
document.getElementById('cVal').textContent =
`Cookie Value: ${cVal}`;
}
</script>
</body>
</html>
Output:
Similar Reads
How to Set Cookies Session per Visitor in JavaScript? Managing session cookies in JavaScript is essential for web developers to maintain user state and preferences across multiple sessions. The document. cookie property provides a basic mechanism for cookie management, utilizing JavaScript libraries or frameworks can offer enhanced security and flexibi
4 min read
How to Clear all Cookies using JavaScript? Cookies allow clients and servers to exchange information via HTTP, enabling state management despite HTTP being a stateless protocol. When a server sends a response, it can pass data to the user's browser in the form of key-value pairs, which the browser stores as cookies. On subsequent requests to
2 min read
How to set up a cookie that never expires in JavaScript ? We can set up a cookie that never expires in JavaScript using the following approach:Prerequisites :Intermediate level knowledge of JavaScriptBasic HTML Disclaimer: All the cookies expire as per the cookie specification. So, there is no block of code you can write in JavaScript to set up a cookie th
2 min read
How to list all the cookies of the current page using JavaScript ? Cookies are small pieces of data stored by websites on your browser to remember information about your visit, such as login status, preferences, or other settings. In JavaScript, you can easily retrieve cookies stored by the current domain using document.cookie. However, due to security reasons, you
3 min read
How to set and unset cookies using jQuery? An HTTP cookie is a small piece of data sent from a server and stored on client-side by the browser itself, Cookies are made to keep track of user and also to provide one nice browsing experience. We can also set our own cookies in the browser according to our need. Cookies can be set in the browser
2 min read
How to Make a Cookie Clicker Using HTML and JavaScript? Creating a "Cookie Clicker" game is a great beginner project for learning how to manipulate elements in HTML with JavaScript. The idea is simple: a user clicks on a cookie image, and each click increases the score. We can add more features like auto-clickers, upgrades, or score multipliers, but we'l
3 min read