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.
