Sunday, September 22, 2019

How to Deleting a Cookie in JavaScript? Explain it with example.

In the previous section, we learned the different ways to set and update a cookie in JavaScript. Apart from that, JavaScript also allows us to delete a cookie. 

Here, we see all the possible ways to delete a cookie.

Different ways to delete a Cookie

These are the following ways to delete a cookie:
  • A cookie can be deleted by using expire attribute.
  • A cookie can also be deleted by using max-age attribute.
  • We can delete a cookie explicitly, by using a web browser.

Examples to delete a Cookie

Example 1

In this example, we use expire attribute to delete a cookie by providing expiry date (i.e. any past date) to it.


  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. </head>  
  5. <body>  
  6.      
  7. <input type="button" value="Set Cookie" onclick="setCookie()">  
  8. <input type="button" value="Get Cookie" onclick="getCookie()">  
  9. <script>  
  10. function setCookie()   
  11. {  
  12.     document.cookie="name=Martin Roy; expires=Sun, 20 Aug 2000 12:00:00 UTC";      
  13. }   
  14. function getCookie()  
  15. {  
  16.     if(document.cookie.length!=0)  
  17.     {  
  18.     alert(document.cookie);  
  19.     }  
  20.     else  
  21.     {  
  22.         alert("Cookie not avaliable");  
  23.     }  
  24. }  
  25. </script>  
  26. </body>  
  27. </html>  

Example 2

In this example, we use max-age attribute to delete a cookie by providing zero or negative number (that represents seconds) to it.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. </head>  
  5. <body>       
  6. <input type="button" value="Set Cookie" onclick="setCookie()">  
  7. <input type="button" value="Get Cookie" onclick="getCookie()">  
  8. <script>  
  9. function setCookie()   
  10. {  
  11.     document.cookie="name=Martin Roy;max-age=0";  
  12. }   
  13. function getCookie()  
  14. {  
  15.     if(document.cookie.length!=0)  
  16.     {  
  17.     alert(document.cookie);  
  18.     }  
  19.     else  
  20.     {  
  21.         alert("Cookie not avaliable");  
  22.     }  
  23. }
  24.   
  25. </script>  
  26. </body>  
  27. </html>  

Example 3

Let's see an example to set, get and delete multiple cookies.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. </head>  
  5. <body>       
  6. <input type="button" value="Set Cookie1" onclick="setCookie1()">  
  7. <input type="button" value="Get Cookie1" onclick="getCookie1()">  
  8. <input type="button" value="Delete Cookie1" onclick="deleteCookie1()">  
  9. <br>  
  10. <input type="button" value="Set Cookie2" onclick="setCookie2()">  
  11. <input type="button" value="Get Cookie2" onclick="getCookie2()">  
  12. <input type="button" value="Delete Cookie2" onclick="deleteCookie2()">  
  13. <br>  
  14. <input type="button" value="Display all cookies" onclick="displayCookie()"> 
  15.  <script>  
  16. function setCookie1()   
  17. {  
  18.     document.cookie="name=Martin Roy";  
  19.      cookie1=  document.cookie;  
  20. }   
  21. function setCookie2()   
  22. {  
  23.     document.cookie="name=Duke William";  
  24.      cookie2=  document.cookie;  
  25. }   
  26.   
  27. function getCookie1()  
  28. {  
  29.     if(cookie1.length!=0)  
  30.     {  
  31.     alert(cookie1);  
  32.     }  
  33.     else  
  34.     {  
  35.         alert("Cookie not available");  
  36.     }  
  37. }  
  38.   
  39. function getCookie2()  
  40. {  
  41.     if(cookie2.length!=0)  
  42.     {  
  43.     alert(cookie2);  
  44.     }  
  45.     else  
  46.     {  
  47.         alert("Cookie not available");  
  48.     }  
  49. }  
  50.   
  51. function deleteCookie1()  
  52. {  
  53.     document.cookie=cookie1+";max-age=0";  
  54.     cookie1=document.cookie;  
  55.     alert("Cookie1 is deleted");  
  56. }  
  57.   
  58. function deleteCookie2()  
  59. {  
  60.     document.cookie=cookie2+";max-age=0";  
  61.     cookie2=document.cookie;  
  62.    alert("Cookie2 is deleted");  
  63. }  
  64.   
  65. function displayCookie()  
  66. {  
  67. if(cookie1!=0&&cookie2!=0)  
  68. {  
  69.     alert(cookie1+" "+cookie2);  
  70. }  
  71. else if(cookie1!=0)  
  72. {  
  73.     alert(cookie1);  
  74. }  
  75. else if(cookie2!=0)  
  76. {  
  77.     alert(cookie2);  
  78. }  
  79. else{  
  80.     alert("Cookie not available");  
  81. }  
  82.   
  83. }  
  84.   
  85. </script>  
  86. </body>  
  87. </html>  

Example 4

Let's see an example to delete a cookie explicitly.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. </head>  
  5. <body>       
  6. <input type="button" value="Set Cookie" onclick="setCookie()">  
  7. <input type="button" value="Get Cookie" onclick="getCookie()">  
  8. <script>  
  9. function setCookie()   
  10. {  
  11.     document.cookie="name=Martin Roy";  
  12.     
  13. }   
  14. function getCookie()  
  15. {  
  16.     if(document.cookie.length!=0)  
  17.     {  
  18.     alert(document.cookie);  
  19.     }  
  20.     else  
  21.     {  
  22.         alert("Cookie not avaliable");  
  23.     }  
  24. }  
  25. </script>  
  26. </body>  
  27. </html>  

After clicking Set Cookie once, whenever we click Get Cookie, the cookies key and value is displayed on the screen.

JavaScript Deleting a Cookie

To delete a cookie explicitly, follow the following steps:
  • Open Mozilla Firefox.
  • Click Open menu - Library - History - Clear Recent History - Details.
JavaScript Deleting a Cookie
  • Here we can see a Cookies checkbox which is already marked. Now, click Clear Now to delete the cookies explicitly.
Now, on clicking Get Cookie, the below dialog box appears.

JavaScript Deleting a Cookie

Here, we can see that the cookies are deleted.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)