Introducing: The Async Cookie Store API

Matan Borenkraout
Oct 16 · 4 min read

TLDR:
The Cookie Store API is a new browser API built to expose cookies to service worker and offer an asynchronous alternative to document.cookie. It’s available in Chrome Browser starting from version 87.

Are you sick and tired of weird ways to get cookies fromdocument.cookie ? Hate it that you don’t know whether the cookie you set was actually saved or not? Introducing: Cookie Store API, available on Chrome version 87!

Image for post
Image for post
Photo by Christina Branco on Unsplash

Motivation

The Cookie Store API aims to improve this by providing an asynchronous alternative to document.cookie and exposing HTTP cookies to service workers, which will also benefit performance. It’s available on Chrome Browser starting from version 87 but still didn’t land in any other major browsers.

Get Cookies

Image for post
Image for post

In the new way, all we need to do is use the cookieStore object and call its get function. Don’t forget that this returns a promise so you await for its result and if something wrong happened, it would throw an error:

Image for post
Image for post

No more looping over a cookies string! Amazing!

Set Cookie

Image for post
Image for post

Following what we wrote about getting cookies, the setCookie util probably looks somewhat like this:

Image for post
Image for post

After doing that, we’d probably also want to know that the cookie was successfully created. So we’ll use the getCookie util from before and loop over the cookies string to find that cookie.

In the new API, what you’ll need to do is use the cookieStore object and call the set function with the params, that’s all.

Image for post
Image for post

After calling that function, as long as we didn’t get to the catch block, we can be 100% sure that the cookie was saved successfully, and we don’t need to loop over anything or call cookieStore.get to see that it was saved.

Delete Cookies

Image for post
Image for post

It will basically set the cookie date to an old date and count on the browser to delete it since it’s already expired.

In the new way, you’ll need to call the delete function:

Image for post
Image for post

Once again, as long as we didn’t get to the catch block, you can 100% be sure that the delete happened.

Monitoring Cookies

Image for post
Image for post

Summary

I hope everyone’s feeling well and keeping themselves safe!
If you have any questions, I’m here and also on Twitter. Feel free to ask or comment, I’d love to hear your feedback!

Thanks,
Matan.

Nielsen-Tel-Aviv-tech-blog

A publication by the Nielsen Tel Aviv Engineering team…

Matan Borenkraout

Written by

Frontend Engineer | Creating better software, one word at a time | Matan.io

Nielsen-Tel-Aviv-tech-blog

A publication by the Nielsen Tel Aviv Engineering team, where we talk about what we do and how we do things

Matan Borenkraout

Written by

Frontend Engineer | Creating better software, one word at a time | Matan.io

Nielsen-Tel-Aviv-tech-blog

A publication by the Nielsen Tel Aviv Engineering team, where we talk about what we do and how we do things

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store