How to serialize a cookie name-value pair into a Set-Cookie header string in JavaScript ?

In this article, you will understand to serialize a cookie with name and value into a Set-Cookie header string. Basically, here we are trying to pass the cookie with a compatible set-cookie string format.

Cookie: Cookies are small blocks of data created by a web server while a user is browsing a website and are stored on the user’s computer for future use.

Set-Cookie: An HTTP response header that is used to set cookies on the user’s system by the web server. 

Syntax:

Set-Cookie : <cookie-name> = <cookie-value>

where,

• A <cookie-name> can contain any character except: 

( ) < > @ , ; : \ " / [ ] ? = { }

• A <cookie-value> can be quoted or unquoted.

Approach: To serialize this cookie we can use a method in javascript which is called encodeURIComponent( ). The encodeURIComponent( ) function encodes a URI by replacing each character with one, two, three, or four escape sequences representing the UTF-8 encoding of the character. So, this will help us to replace all the incompatible characters.

Examples:

encodeURIComponent(‘G F G’)    // output : G%20F%20G

We need to create a function by the name serializeCookie which accepts two parameters which are cookie_name and cookie_value. 

function serializeCookie(cookie_name , cookie_value){ … }

This function returns the string in the format <cookie-name>=<cookie-value>  with encodeURIComponent( ) shown below :

function serializeCookie(cookie_name , cookie_value){ 

return `${encodeURIComponent(cookie_name)}=${encodeURIComponent(cookie_value)}`;

}

Example 1: Below is the implementation of the above approach:

Output:

 

Explanation: foo is the <cookie-name> and bar is the <cookie-value> that is encoded to foo=bar using the arrow function serializeCookie( )

Example 2: Here you are creating a complete Set-Cookie header:

Output :

 

Explanation: Use the same above approach where we have the serializeCookie function that returns a complete Set-Cookie header value containing parameters like path, Secure, and HttpOnly in serialized form.