Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Last Updated : 22 Jul, 2021

Cookies are simply small text files that a web server sends to the user’s browser. They contain the following data.

  1. Name-value pair with actual data.
  2. The expiry date for when the cookie becomes invalid.
  3. 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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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.

  1. Get each individual key-value pair from the cookie string using string.split(“;”).
  2. Separate keys from values in each pair using string.split(“=”).
  3. 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.



My Personal Notes arrow_drop_up
Recommended Articles
Page :