Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
</head>
  
<body>
    <h1 style="color:green">
          GeeksForGeeks</h1>
    <h3>How to serialize a cookie name-value
        pair into a Set-Cookie header string in JavaScript?</h3>
</body>
<script>
    const serializeCookie = (name, val) =>
`${encodeURIComponent(name)}=${encodeURIComponent(val)}`;
    document.body.append(serializeCookie('foo', 'bar'));
  
</script>
</html>


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:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
</head>
  
<body>
    <h1 style="color:green">
          GeeksForGeeks</h1>
    <h3>How to serialize a cookie name-value pair
        into a Set-Cookie header string in JavaScript?</h3>
</body>
<script>
    const serializeCookie = (name, val) =>
    `${encodeURIComponent(name)}=${encodeURIComponent(val)}`;
    document.body.append(`${serializeCookie('foo', 'bar')};
    ${serializeCookie('Path', 'http://example.com/path/to/page')};
    Secure;${serializeCookie('Expires', 'Wed, 21 Oct 2015 07:28:00 GMT')};
    HttpOnly;${serializeCookie('SameSite', 'Lax')}`);
</script>
</html>


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.



Last Updated : 30 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads