Skip to main content Accessibility Feedback

Browser Storage

Cookies

You can use the document.cookie property to set a cookie.

It’s a string, using a {KEY}={VALUE}; format. Cookies can only contain string values.

// Set a cookie named sandwich, with a value of turkey
document.cookie = 'sandwich=turkey;';

Cookies can also include several optional settings, most using a key=value format, separated by a semicolon (;).

  • path={path} - The path to set the cookie at. Defaults to the current path. It might be a good idea to set this to the root path: path=/.
  • domain={domain} - The domain for the cookie. Defaults to the current host name.
  • max-age={max age in seconds} - The maximum amount of time to keep the cookie, in seconds.
  • expires={date in GMT form} - A date on which to expire the cookie.
  • secure - The cookie can only be transmitted over HTTPS.
  • same-site={lax|strict|none} - Whether or not the browser can send the cookie to other sites. The default, lax, only sends with same-site requests and navigation GET requests; strict does not send to any external sites, even when following a link; and none does not place any restrictions.
// set to the root path
// expires in two weeks: 60 seconds x 60 minutes x 24 hours x 14 days
// (we'll look at the math behind this in the next section)
document.cookie = `snack=chips; path=/; max-age=${60 * 60 * 24 * 14};`;

If you do not set either a max-age or expires value, cookies can potentially remain in the browser indefinitely. As a best practice, you should generally always set one of the two values.

You can use the document.cookie property to get the cookies for a site. However, all of the cookies for a site are stored as a single string, which makes getting the value of one of them a bit tedious.

The getCookie() helper method makes this easier.

let sandwich = getCookie('sandwich');
let snack = getCookie('snack');

To delete a cookie, you set it again with a max-age of 0 or an expires date to the current time or sooner. The cookie value can be anything.

Be sure that the path matches the one used to set the cookie, or it will not work.

// Delete the cookie
document.cookie = `sandwich=turkey; path=/; max-age=0;`;

⏰ Preorder my new course on Web Components! Want to learn how to build Web Components from scratch, master best practices, and more? Preorder today and get $100 off of the launch price.


Find this useful? You can support my work by purchasing an annual membership.