When working with JavaScript, it's important to note that a single cookie is limited to holding just one name-value pair. To work around this limitation and store multiple name-value pairs, consider the following methods:
- Serialize the custom object into a JSON string, parse it, and then save it within a cookie.
- Utilize a distinct cookie for each name-value pair.
Examples to Store Name-Value pair in a Cookie
Example 1
Let's examine an example to verify if a cookie includes multiple name-value pairs.
<!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.getElementById("email").value+";Course="+document.getElementById("course").value;
//Providing all 3 key-value pairs to a single cookie
document.cookie=info;
}
function getCookie()
{
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:
Upon clicking the "Get Cookie" button, a dialog box as described below will be displayed.
In this example, we observe the display of a solitary name-value pair.
If you attempt to retrieve a cookie without entering data into the form, a dialog box will be displayed as shown below.
Example 2
An illustration will be presented to demonstrate how to save various key-value pairs in a cookie by utilizing 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
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>
Output:
When you click on the "Get Cookie" button, a dialog box like the one below will be displayed.
In this section, we observe the presentation of all the stored key-value pairs.
Example 3
Let's explore an illustration of storing individual name-value pairs in separate cookies.
<!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)
{
alert("Name="+document.getElementById("name").value+" Email="+document.getElementById("email").value+" Course="+document.getElementById("course").value);
}
else
{
alert("Cookie not available");
}
}
</script>
</body>
</html>
Output:
When the Get Cookie button is clicked, a dialog box as shown below will be displayed.
In this instance, we can also observe the display of all the stored pairs of names and values.