Post
Ask Question

Cookies in JavaScript

Introduction

 
This article explains the use of cookies in JavaScript. We know that HTTP is a stateless protocol, in other words, each and every request to the webserver is new. It does not remember any previous history of requests. So, to maintain persistence between requests we can use various techniques. They are called state management techniques.
Cookies are data, stored in small text files, on your computer.
 
When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user.
Cookies were invented to solve the problem "how to remember information about the user":
  • When a user visits a web page, his name can be stored in a cookie.
  • Next time the user visits the page, the cookie "remembers" his name.
Cookies are two types in nature
 
Persistence cookies: This type of cookies remain active even after the browser window is closed. There is a certain time limitation for them, it might be a few days or a few years.
 
Non-persistence cookies: This type of cooky is deleted automatically after the browser closes.
 
Create cookie in JavaScript
 
In this example, we will create one simple cookie. Have a look at the following example.
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4. </head>    
  5. <body>    
  6.     <script>    
  7.         document.cookie = "name=" + 'Sourav Kayal';    
  8.         console.log(document.cookie.split(';'));    
  9.     </script>    
  10. </body>    
  11. </html>  
Show all cookies
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4. </head>    
  5. <body>    
  6.     <script>    
  7.         console.log("Name of cookies:- " + document.cookie);    
  8.     </script>    
  9. </body>    
  10. </html>  
Show all cookies with key value pair
 
This is another way to show all the cookies. In this example we will print all the cookies with key-value pair. At first, we will extract all cookies from the document object and then we will go through all of them using a for a loop.
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4. </head>    
  5. <body>    
  6.     <script>    
  7.      
  8.         //Get all cookies in variable    
  9.         var cookies = document.cookie;    
  10.             
  11.         // Split all the cookies by ; separator    
  12.         ArrayCook = cookies.split(';');    
  13.      
  14.         // Now take key value pair out of this array using for loop    
  15.         for (var i = 0; i < ArrayCook.length; i++) {    
  16.             name = cookiearray[i].split('=')[0];    
  17.             value = cookiearray[i].split('=')[1];    
  18.             console.log("Key is : " + name + " and Value is : " + value);    
  19.         }    
  20.      
  21.     </script>    
  22. </body>    
  23. </html>  
Set persistent cookie
 
We can create a persistent cookie by specifying an expires property for the cookie. In this example we are creating one cookie that will stay in the computer for 1 month. Have a look at the following code.
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4. </head>    
  5. <body>    
  6.     <script>    
  7.      
  8.         var today = new Date();    
  9.         today.setMonth(today.getMonth() + 1);    
  10.         cookievalue = 'Rama Sagar';    
  11.         document.cookie = "name=" + cookievalue;    
  12.         document.cookie = "expires=" + today.toUTCString() + ";"    
  13.         console.log("Cookie set : " + "name=" + cookievalue);    
  14.      
  15.     </script>    
  16. </body>    
  17. </html>   

Summary

 
This article explained cookies in JavaScript. 


Similar Articles