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.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

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