How to parse HTTP Cookie header and return an object of all cookie name-value pairs in JavaScript ? - GeeksforGeeks

22 Jul, 2021
Cookies are simply small text files that a web server sends to the user’s browser. They contain the following data.
Name-value pair with actual data.The expiry date for when the cookie becomes invalid.Domain and path of the server it should be sent to.
Name-value pair with actual data.
The expiry date for when the cookie becomes invalid.
Domain and path of the server it should be sent to.
Approach: To retrieve all the stored cookies in JavaScript, we can use the document.cookie property but this property returns a single string in which the key-value pair is separated by a “;”. It would be great if we can store the key-value pair into an object as it would make the retrieval process much easier. JavaScript does not provide any methods for such a scenario. So let’s work around this problem.
We need to create a function that will parse the cookie string and would return an object containing all the cookies. This would be a simple process with the following steps.
Get each individual key-value pair from the cookie string using string.split(“;”).Separate keys from values in each pair using string.split(“=”).Create an object with all key-value pairs and return the object.
Get each individual key-value pair from the cookie string using string.split(“;”).
Separate keys from values in each pair using string.split(“=”).
Create an object with all key-value pairs and return the object.
Example: Refer to the comments in the following code for better understanding.
Javascript
<script>    function cookieParser(cookieString) {         // Return an empty object if cookieString        // is empty        if (cookieString === "")            return {};         // Get each individual key-value pairs        // from the cookie string        // This returns a new array        let pairs = cookieString.split(";");         // Separate keys from values in each pair string        // Returns a new array which looks like        // [[key1,value1], [key2,value2], ...]        let splittedPairs = pairs.map(cookie => cookie.split("="));          // Create an object with all key-value pairs        const cookieObj = splittedPairs.reduce(function (obj, cookie) {             // cookie[0] is the key of cookie            // cookie[1] is the value of the cookie            // decodeURIComponent() decodes the cookie            // string, to handle cookies with special            // characters, e.g. '$'.            // string.trim() trims the blank spaces            // auround the key and value.            obj[decodeURIComponent(cookie[0].trim())]                = decodeURIComponent(cookie[1].trim());             return obj;        }, {})         return cookieObj;    }     let dummyCookieString =        "username=John; gfg=GeeksForGeeks; foo=education";     // Pass document.cookie to retrieve actual cookies    let cookieObj = cookieParser(dummyCookieString);     console.log(`cookie gfg has value ${cookieObj['gfg']}.`);    console.log(`cookie foo has value ${cookieObj['foo']}.`);</script>
Output:
cookie gfg has value GeeksForGeeks.
cookie foo has value education.
gabaa406
http
javascript-functions
JavaScript-Questions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript