cookieStore: Async Cookie API

By  on  

One pattern in the JavaScript API world that web development veterans will notice is that we've been creating new methods to accomplish what older, grosser APIs once achieved. XMLHttpRequest became the fetch API, some APIs like Battery became async, and there are dozens of other examples. Another API desperately in need of updating is the cookie API...and we've finally got it: cookieStore.

The new cookie API, cookieStore, is asynchronous and provides a logical method for cookie management. You have to remember that the previous method of getting and setting cookies completely revolved around concatenating and parsing document.cookie as a string. Don't believe me? Check out this monstrosity!

document.cookie =
  '__Secure-COOKIENAME=cookie-value' +
  '; Path=/' +
  '; expires=Fri, 12 Aug 2016 23:05:17 GMT' +
  '; Secure' +
  '; Domain=example.org';
// now we could assume the write succeeded, but since
// failure is silent it is difficult to tell, so we
// read to see whether the write succeeded
var successRegExp =
  /(^|; ?)__Secure-COOKIENAME=cookie-value(;|$)/;
if (String(document.cookie).match(successRegExp)) {
  console.log('It worked!');
} else {
  console.error('It did not work, and we do not know why');
}

Let's focus on using this new API, cookieStore, to bring sanity to cookies!

If you really want to see how cookies are presented to you now, go to your favorite website and type document.cookie . The horror!

Set a Cookie

cookieStore.set allows you to set a cookie with name, value, and other specifics:

// All cookieStore methods are async, so you can `await` or `then`/`catch`
await cookieStore.set({ 
  name: "dw-test", 
  value: 1, 
  domain: 'davidwalsh.name', 
  // Very far in the future!
  expires: Date.now() + Date.now() 
});

// Quick, naive set
await cookieStore.set('key', 'value');

This is so much better than concatenating an odd string onto and already odd document.cookie!

Get a Cookie

cookieStore.get provides a method for getting the value of a specific cookie:

const testCookie = await cookieStore.get('dw-test');

{
  domain: "davidwalsh.name",
  expires: 3206289322149,
  name: "dw-test",
  path: "/",
  sameSite: "strict",
  secure: true,
  value: "1",
}

If the cookie exists and hasn't expired, the value and much more about the cookie will be returned. Yes -- a simple get method instead of parsing a string! Tears in my eyes!

Delete a Cookie

We can use cookieStore.delete to remove a cookie:

await cookieStore.delete('dw-test');

Just as simple as you'd expect!

Cookie Change Event

If you'd like to know when cookies are being created, deleted, or modified, you can listen for the change event on the cookieStore:

cookieStore.addEventListener('change', event => {
  console.log(`${event.changed.length} changed cookies`);
  for (const cookie in event.changed)
    console.log(`Cookie ${cookie.name} changed to ${cookie.value}`);

  console.log(`${event.deleted.length} deleted cookies`);
  for (const cookie in event.deleted)
    console.log(`Cookie ${cookie.name} deleted`);
});

I'm so happy that the old document.cookie is essentially getting replaced with this awesome but simple cookieStore API. Onward and upward with JavaScript APIs! Which legacy API would you like to see improved next?

Recent Features

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

Incredible Demos

  • By
    Create a Simple Dojo Accordion

    Let's be honest:  even though we all giggle about how cheap of a thrill JavaScript accordions have become on the web, they remain an effective, useful widget.  Lots of content, small amount of space.  Dojo's Dijit library provides an incredibly simply method by which you can...

  • By
    Modal-Style Text Selection with Fokus

    Every once in a while I find a tiny JavaScript library that does something very specific, very well.  My latest find, Fokus, is a utility that listens for text selection within the page, and when such an event occurs, shows a beautiful modal dialog in...

Discussion

  1. Finally! This looks amazing!

    Is there any info on when this new API is coming to browsers? I could only find the cookies API which seems to only be for browser extensions: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies

  2. Oscar

    Thanks for this David. Do you know something about this new API in regards of security? Like being a valid alternative over HTTPOnly

  3. I recently made a best-attempt at a quick shim for this, but it’s not capable of the same things. The getter doesn’t have access to things like path or expires, and I cannot easily dispatch events when cookies are changed via HTTP.

    I’ll be glad when cookieStore is finalized and has good support. I’m wondering how much it’ll change, since there is some opposition regarding privacy.

  4. Hi, David. There are no any cookie store API in MS Edge for now. Is it only Fire Fox solution in present days?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!