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.