How to return an object by parsing http cookie header in JavaScript?

Front End Technology Javascript Web Development

Cookies are small pieces of data that are sent from a website to a user's web browser. They are used to store information about the user, such as their preferences or login status.

When a user visits a website, their web browser will send a request to the server. The server will then send a response, which includes a set of headers. One of these headers is the "Cookie" header, which contains a list of all the cookies that are associated with the website.

Parsing the Cookie Header

In order to parse the Cookie header, we need to first split it into individual name-value pairs. This can be done using the String.split() method.

Once we have an array of name-value pairs, we can then loop through it and create an object. The object will have the cookie name as the key and the cookie value as the value.

Let's say we have the following Cookie header −

Set-Cookie: username=john; expires=Thu, 18 Dec 2019 12:00:00 GMT; path=/;

We can split it into individual name-value pairs like so −

var pairs = header.split(';');

This will give us the following array −

['username=john', 'expires=Thu, 18 Dec 2019 12:00:00 GMT', 'path=/']

We can then loop through this array and create an object −

var cookies = {};
for (var i = 0; i < pairs.length; i++) {
   var nameValue = pairs[i].split('=');
   cookies[nameValue[0].trim()] = nameValue[1];
}

This will give us the following object −

{ username: 'john', expires: 'Thu, 18 Dec 2019 12:00:00 GMT', path: '/' }

Approach

STEP 1 − We start by creating a function named parseCookieHeader(). This function will take the cookie header as a parameter.
STEP 2 − We use the String.split() method to split the header into individual name-value pairs.
STEP 3 − We create an empty object to store the cookies.
STEP 4 − We use a for loop to loop through all the name-value pairs
STEP 5 − We use the String.split() method to split each name-value pair into an array.
STEP 6 − We store the first element of the array (the cookie name) as the key in the cookies object. We store the second element of the array (the cookie value) as the value in the cookies object.
STEP 7 − We return the cookies object.
STEP 8 − We get the cookie header from the document.
STEP 9 − We call the parseCookieHeader() function and pass in the cookie header. This will return an object of all the cookies.
STEP 10 − We display the cookies in the console as well as on the output window.

Example

The following program demonstrates how to parse the HTTP Cookie header and return an object of all cookie name-value pairs. Here is the full working code −


<!Doctype HTML>
<HTML>
<head>
   <title>Example</title>
</head>
<body>
   <h3> Parsing HTTP Cookie Header </h3>
   <p> Object of all cookie name-value pairs:</p>
   <div id="result"></div>
   <script>
      // Function to parse the cookie header
      function parseCookieHeader(header) {
      
         // Split the header into individual name-value pairs
         var pairs = header.split(';');
      
         // Create an object to store the cookies
         var cookies = {};

         // Loop through the name-value pairs and store them in the object
         for (var i = 0; i < pairs.length; i++) {
            var nameValue = pairs[i].split('=');
            cookies[nameValue[0].trim()] = nameValue[1];
         }
      
         // Return the object
         return cookies;
      }

      // Get the cookie header from the document
      var header = "username=john; expires=Thu, 18 Dec 2019 12:00:00 GMT; path=/;"

      // Parse the cookie header
      var cookies = parseCookieHeader(header);

      // Display the cookies
      console.log(cookies)
      document.getElementById("result").innerHTML = JSON.stringify(cookies)
   </script>
</body>
</html>