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.


🔥 Hot off the press! I just launched a new pocket guide. Learn how to build interactive web apps with vanilla JavaScript.

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