8/26/24, 9:45 AM JavaScript Cookie with multiple Name - javatpoint
Home JavaScript HTML CSS Bootstrap jQuery Node.js PHP
https://www.javatpoint.com/javascript-cookie-with-multiple-name 1/11
8/26/24, 9:45 AM JavaScript Cookie with multiple Name - javatpoint
Cookie with multiple Name-Value pairs
In JavaScript, a cookie can contain only a single name-value pair. However, to store more than one
name-value pair, we can use the following approach: -
Serialize the custom object in a JSON string, parse it and then store in a cookie.
For each name-value pair, use a separate cookie.
Examples to Store Name-Value pair in a Cookie
Example 1
Let's see an example to check whether a cookie contains more than one name-value pair.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Name: <input type="text" id="name"><br>
Email: <input type="email" id="email"><br>
Course: <input type="text" id="course"><br>
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get Cookie" onclick="getCookie()">
<script>
function setCookie()
{
//Declaring 3 key-value pairs
var info="Name="+ document.getElementById("name").value+";Email="+document.getElemen
//Providing all 3 key-value pairs to a single cookie
document.cookie=info;
}
function getCookie()
https://www.javatpoint.com/javascript-cookie-with-multiple-name 2/11
8/26/24, 9:45 AM JavaScript Cookie with multiple Name - javatpoint
{
if(document.cookie.length!=0)
{
//Invoking key-value pair stored in a cookie
alert(document.cookie);
}
else
{
alert("Cookie not available")
}
}
</script>
</body>
</html>
Output:
Test it Now
On clicking Get Cookie button, the below dialog box appears.
Blue Light Blocking Glasses
2024 Trending Blue Light Blocking
AliExpress
Here, we can see that only a single name-value is displayed.
However, if you click, Get Cookie without filling the form, the below dialog box appears.
https://www.javatpoint.com/javascript-cookie-with-multiple-name 3/11
8/26/24, 9:45 AM JavaScript Cookie with multiple Name - javatpoint
Example 2
Let's see an example to store different name-value pairs in a cookie using JSON.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Name: <input type="text" id="name"><br>
Email: <input type="email" id="email"><br>
Course: <input type="text" id="course"><br>
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get Cookie" onclick="getCookie()">
<script>
function setCookie()
{
var obj = {};//Creating custom object
obj.name = document.getElementById("name").value;
obj.email = document.getElementById("email").value;
obj.course = document.getElementById("course").value;
//Converting JavaScript object to JSON string
https://www.javatpoint.com/javascript-cookie-with-multiple-name 4/11
8/26/24, 9:45 AM JavaScript Cookie with multiple Name - javatpoint
var jsonString = JSON.stringify(obj);
document.cookie = jsonString;
}
function getCookie()
{
if( document.cookie.length!=0)
{
//Parsing JSON string to JSON object
var obj = JSON.parse(document.cookie);
alert("Name="+obj.name+" "+"Email="+obj.email+" "+"Course="+obj.course);
}
else
{
alert("Cookie not available");
}
}
</script>
</body>
</html>
Test it Now
Output:
On clicking Get Cookie button, the below dialog box appears.
https://www.javatpoint.com/javascript-cookie-with-multiple-name 5/11
8/26/24, 9:45 AM JavaScript Cookie with multiple Name - javatpoint
Here, we can see that all the stored name-value pairs are displayed.
Example 3
Let's see an example to store each name-value pair in a different cookie.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Name: <input type="text" id="name"><br>
Email: <input type="email" id="email"><br>
Course: <input type="text" id="course"><br>
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get Cookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie = "name=" + document.getElementById("name").value;
document.cookie = "email=" + document.getElementById("email").value;
document.cookie = "course=" + document.getElementById("course").value;
}
function getCookie()
{
if (document.cookie.length != 0)
https://www.javatpoint.com/javascript-cookie-with-multiple-name 6/11
8/26/24, 9:45 AM JavaScript Cookie with multiple Name - javatpoint
{
alert("Name="+document.getElementById("name").value+" Email="+document.getElementByI
}
else
{
alert("Cookie not available");
}
}
</script>
</body>
</html>
Output:
Test it Now
On clicking Get Cookie button, the below dialog box appears.
Here, also we can see that all the stored name-value pairs are displayed.
← Prev Next →
https://www.javatpoint.com/javascript-cookie-with-multiple-name 7/11
8/26/24, 9:45 AM JavaScript Cookie with multiple Name - javatpoint
Youtube For Videos Join Our Youtube Channel: Join Now
Feedback
Send your Feedback to feedback@javatpoint.com
Help Others, Please Share
Learn Latest Tutorials
Splunk tutorial SPSS tutorial Swagger T-SQL tutorial
tutorial
Splunk SPSS Transact-SQL
Swagger
Tumblr tutorial React tutorial Regex tutorial Reinforcement
learning tutorial
Tumblr ReactJS Regex
Reinforcement
Learning
R Programming RxJS tutorial React Native Python Design
tutorial tutorial Patterns
RxJS
R Programming React Native Python Design
Patterns
https://www.javatpoint.com/javascript-cookie-with-multiple-name 8/11
8/26/24, 9:45 AM JavaScript Cookie with multiple Name - javatpoint
Python Pillow Python Turtle Keras tutorial
tutorial tutorial
Keras
Python Pillow Python Turtle
Preparation
Aptitude Logical Verbal Ability Interview
Reasoning Questions
Aptitude Verbal Ability
Reasoning Interview Questions
Company
Interview
Questions
Company Questions
Trending Technologies
Artificial AWS Tutorial Selenium Cloud
Intelligence tutorial Computing
AWS
Artificial Selenium Cloud Computing
Intelligence
Hadoop tutorial ReactJS Data Science Angular 7
Tutorial Tutorial Tutorial
Hadoop
ReactJS Data Science Angular 7
Blockchain Git Tutorial Machine DevOps
Tutorial Learning Tutorial Tutorial
Git
Blockchain Machine Learning DevOps
https://www.javatpoint.com/javascript-cookie-with-multiple-name 9/11
8/26/24, 9:45 AM JavaScript Cookie with multiple Name - javatpoint
B.Tech / MCA
DBMS tutorial Data Structures DAA tutorial Operating
tutorial System
DBMS DAA
Data Structures Operating System
Computer Compiler Computer Discrete
Network tutorial Design tutorial Organization and Mathematics
Architecture Tutorial
Computer Network Compiler Design
Computer Discrete
Organization Mathematics
Ethical Hacking Computer Software html tutorial
Graphics Tutorial Engineering
Ethical Hacking Web Technology
Computer Graphics Software
Engineering
Cyber Security Automata C Language C++ tutorial
tutorial Tutorial tutorial
C++
Cyber Security Automata C Programming
Java tutorial .Net Python tutorial List of
Framework Programs
Java Python
tutorial
Programs
.Net
Control Data Mining Data
Systems tutorial Tutorial Warehouse
Tutorial
Control System Data Mining
Data Warehouse
https://www.javatpoint.com/javascript-cookie-with-multiple-name 10/11
8/26/24, 9:45 AM JavaScript Cookie with multiple Name - javatpoint
Monochromatic Multi Stick
sly Creamy & Blendable Color
https://www.javatpoint.com/javascript-cookie-with-multiple-name 11/11
