Home >>Javascript Tutorial >JavaScript cookie with multiple name

JavaScript cookie with multiple name

Cookie with multiple Name-Value pairs in JavaScript

The cookies with multiple name-value pairs in JavaScript can be achieved by following the approaches mentioned ahead in this JavaScript tutorial. Only a single name value-pair can be contained by a cookie. However, in order to store more than one value-pair, the following approach can be used:

The custom object in a JSON string can be serialized, then parsed and then stored in a cookie.
For each name-value pair, a separate cookie can be used.

Let's have a look at the examples to store Name-Value pair in a cookie

1. Here is 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.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>

2. Here is 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      
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>

3. Here is 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)  
    {  
        alert("Name="+document.getElementById("name").value+" Email="+document.getElementById("email").value+" Course="+document.getElementById("course").value);  
    }      
    else  
    {  
        alert("Cookie not available");  
    }  
}     
 </script>  
</body>  
</html>

« Previous Next »

Javascript Tutorial Javascript Syntax Javascript Comments Javascript Variables Javascript Data Types JavaScript Operators JavaScript If-else JavaScript Switch JavaScript Loop JavaScript Function JavaScript Objects Javascript Array Javascript Array Methods JavaScript Boolean JavaScript Math Object JavaScript Number Javascript String JavaScript Date Javascript Document Object Model(DOM) getElementById() method getElementsByName() method getElementsByTagName() method Javascript innerHTML Javascript innerText JavaScript Events JavaScript Cookies JavaScript Cookies Attributes JavaScript cookie with multiple name JavaScript delete cookies JavaScript form validation Registration form with javascript validation submit form without submit button How to create a countdown timer in jquery Allow Only Numbers in Textbox Javascript How to allow alphabets in text-box using JavaScript JavaScript Classes JavaScript Prototype Object JavaScript Constructor Method JavaScript static Method JavaScript Encapsulation JavaScript Inheritance JavaScript Abstraction JavaScript Polymorphism

JavaScript Interview Questions

Javascript String Methods

Javascript Math Methods

JavaScript Array Methods

JavaScript Date Object Methods

Javascript Programs

No Sidebar ads