TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

JavaScript Cookie with multiple Name

JavaScript Cookie with multiple Name with javascript tutorial, introduction, javascript oops, application of javascript, loop, variable, data types, operators, javascript if, switch, operators, objects, form validation, map, typedarray etc.

<< Back to JAVASCRIPT

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.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:

Test it Now JavaScript Cookie with multiple Name

On clicking Get Cookie button, the below dialog box appears.

JavaScript Cookie with multiple Name

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.

JavaScript Cookie with multiple Name

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    
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:

JavaScript Cookie with multiple Name

On clicking Get Cookie button, the below dialog box appears.

JavaScript Cookie with multiple Name

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)
    {
        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:

Test it Now JavaScript Cookie with multiple Name

On clicking Get Cookie button, the below dialog box appears.

JavaScript Cookie with multiple Name

Here, also we can see that all the stored name-value pairs are displayed.

Next TopicDeleting Cookies




Related Links:


Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf