How to serialize a cookie name-value pair into a Set-Cookie header string in JavaScript ?
Last Updated :
30 Nov, 2022
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')};
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...