Sunday, September 22, 2019

Cookie with multiple Name-Value pairs explain with example

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.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. </head>  
  5. <body>  
  6.     Name: <input type="text" id="name"><br>  
  7.     Email: <input type="email" id="email"><br>  
  8.     Course: <input type="text" id="course"><br>  
  9. <input type="button" value="Set Cookie" onclick="setCookie()">  
  10. <input type="button" value="Get Cookie" onclick="getCookie()">  
  11. <script>  
  12.     function setCookie()  
  13.     {  
  14. //Declaring 3 key-value pairs  
  15.         var info="Name="+ document.getElementById("name").value+";Email="+document.getElementById("email").value+";Course="+document.getElementById("course").value;  
  16. //Providing all 3 key-value pairs to a single cookie  
  17.         document.cookie=info;  
  18.     }  
  19.   
  20.     function getCookie()  
  21.     {  
  22.         if(document.cookie.length!=0)  
  23.         {  
  24.        //Invoking key-value pair stored in a cookie  
  25.         alert(document.cookie);  
  26.         }  
  27.         else  
  28.         {  
  29.         alert("Cookie not available")  
  30.         }  
  31.     }  
  32. </script>  
  33. </body>  
  34. </html>  

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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. </head>  
  5. <body>  
  6.     Name: <input type="text" id="name"><br>  
  7.     Email: <input type="email" id="email"><br>  
  8.     Course: <input type="text" id="course"><br>  
  9. <input type="button" value="Set Cookie" onclick="setCookie()">  
  10. <input type="button" value="Get Cookie" onclick="getCookie()">  
  11.   
  12. <script>  
  13.     function setCookie()  
  14. {  
  15.     var obj = {};//Creating custom object  
  16.     obj.name = document.getElementById("name").value;  
  17.     obj.email = document.getElementById("email").value;  
  18.     obj.course = document.getElementById("course").value;  
  19.   
  20. //Converting JavaScript object to JSON string      
  21. var jsonString = JSON.stringify(obj);  
  22.   
  23.     document.cookie = jsonString;  
  24. }  
  25.          function getCookie()  
  26. {  
  27.     if( document.cookie.length!=0)  
  28.     {  
  29. //Parsing JSON string to JSON object  
  30.     var obj = JSON.parse(document.cookie);  
  31.       
  32.         alert("Name="+obj.name+" "+"Email="+obj.email+" "+"Course="+obj.course);  
  33.     }  
  34.     else  
  35.     {  
  36.         alert("Cookie not available");  
  37.     }  
  38. }  
  39.     </script>  
  40. </body>  
  41. </html>  

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.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. </head>  
  5. <body>  
  6.     Name: <input type="text" id="name"><br>  
  7.     Email: <input type="email" id="email"><br>  
  8.     Course: <input type="text" id="course"><br>  
  9. <input type="button" value="Set Cookie" onclick="setCookie()">  
  10. <input type="button" value="Get Cookie" onclick="getCookie()">  
  11.   
  12. <script>  
  13.  function setCookie()  
  14. {  
  15.     document.cookie = "name=" + document.getElementById("name").value;  
  16.     document.cookie = "email=" + document.getElementById("email").value;  
  17.     document.cookie = "course=" + document.getElementById("course").value;  
  18. }  
  19. function getCookie()  
  20. {  
  21.     if (document.cookie.length != 0)  
  22.     {  
  23.         alert("Name="+document.getElementById("name").value+" Email="+document.getElementById("email").value+" Course="+document.getElementById("course").value);  
  24.     }      
  25.     else  
  26.     {  
  27.         alert("Cookie not available");  
  28.     }  
  29. }     
  30.  </script>  
  31. </body>  
  32. </html>  
Output:
 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.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)