How can I use JavaScript to get a cookie by name and extract its values into an array?

General Discussions
, ,
1

I currently have a function that parses all cookies, but I want to focus only on the one named obligations. Specifically, I’d like to update the logic so that the JavaScript get cookie by name operation targets just that cookie, splits its value, and stores the individual parts in an array. How should I modify my function to achieve this?

2

(I’ve been working with JavaScript for over 5 years now, especially in web applications that involve cookie management.)

You know, one of the most straightforward ways to handle the javascript get cookie by name task is using simple string operations along with a little bit of looping. Here’s a very basic approach using split:

function getCookieByName(name) {
    const cookies = document.cookie.split('; ');
    for (let cookie of cookies) {
        const [cookieName, cookieValue] = cookie.split('=');
        if (cookieName === name) {
            return cookieValue.split(','); // Assuming values are comma-separated
        }
    }
    return []; // If cookie isn't found, return empty array
}

const obligations = getCookieByName('obligations');
console.log(obligations);

Basically, we split all cookies by ;, then split each cookie into its name and value. If the name matches, we further split the value into an array. This method gives you full control — especially useful when you’re working with custom formatted cookies. Personally, I’ve found this pattern really reliable when dealing with straightforward cookie parsing.

3

Been using JavaScript in frontend-heavy projects for around 6 years — and I really like cleaner, more modern syntax.

Building on what Rima said, if you want something a bit more modern and elegant, using Array.prototype.find() makes the javascript get cookie by name task much cleaner:

function getCookieByName(name) {
    const cookie = document.cookie.split('; ').find(cookie => cookie.startsWith(name + '='));
    return cookie ? cookie.split('=')[1].split(',') : [];
}

const obligations = getCookieByName('obligations');
console.log(obligations);

Instead of looping manually, find() helps us directly locate the cookie we need. Then we just split its value. This method feels a lot more readable, and when working on teams, clean code like this saves everyone time. Personally, I love this when I’m working on codebases that prioritize modern JavaScript practices.

4

Me too coming from a functional programming background, I’ve seen how powerful functional patterns can be even for simple tasks like cookies - been coding for 7+ years.

Taking it one step further, if you enjoy a functional programming style, you can actually make the javascript get cookie by name process even more flexible by using reduce():

function getCookieByName(name) {
    return document.cookie.split('; ').reduce((acc, cookie) => {
        const [cookieName, cookieValue] = cookie.split('=');
        if (cookieName === name) {
            return cookieValue.split(',');
        }
        return acc;
    }, []);
}

const obligations = getCookieByName('obligations');
console.log(obligations);

Here, reduce() accumulates either an empty array or the split value when it finds the correct cookie. This approach shines when you might want to expand the logic later — for instance, handling decoding, trimming spaces, or logging along the way. Personally, this is my go-to when I know cookie handling might get more complex as the project evolves.