Skip to main content Accessibility Feedback

Working with cookies in vanilla JS

Setting a cookie in JavaScript is relatively straightforward:

document.cookie = 'sandwich=turkey; expires=Fri, 31 Dec 2024 23:59:59 GMT;

But what if you want to do save a more complex cookie value? Or retrieve the value of the cookie? For those tasks, you need to use regex patterns. And those are, frankly, a pain in the ass.

Fortunately, there are a couple of simple helper libraries we can use to make working with cookies easier.

For that, you only need this super lightweight getCookie() helper method:

var getCookie = function (name) {
    var value = "; " + document.cookie;
    var parts = value.split("; " + name + "=");
    if (parts.length == 2) return parts.pop().split(";").shift();
};

// Example
var cookieVal = getCookie( 'sandwich' ); // returns "turkey"

The Mozilla Developer Network provides a simple cookie librarydocCookies—that you can use to get, set, and remove cookies.

After you include it on your site, it’s let you do things like this:

// Set a cookie
docCookies.setItem( 'sandwich', 'turkey with tomato and mayo', new Date(2020, 5, 12) );

// Get a cookie
var cookieVal = docCookies.getItem('sandwich');

// Remove a coookie
docCookies.removeItem( 'sandwich' );

It’s a bit larger in size than getCookie(), but much more robust if you need to do more than just the basics.


🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips