Today, while browsing a list of over at MDN, I ran across one that surprised me - the . This is clearly marked as experimental (currently only supported in Chrome/Edge) but looks to be fascinating. web APIs Cookie Store API Cookies are the oldest (as far as I know) way for web applications to store data on the client. They're also typically the least recommended way of doing so, for many, many reasons. However, sometimes you need to work with cookies, and this looks like a nice new way of dealing with them. Here's a quick look. really The Old Way For the past few hundred years or so, working with cookies in the browser involved string parsing. There really wasn't even an "API." You would read which returned a delimited string of cookie values: document.cookie '_ga=GA1.1.277504870.1615419234; ezux_ifep_238929=true; ezouspvh=1900; __qca=I0-1813545485-1623786777967; ezouspva=0; ezouspvv=0; ezux_et_238929=10099; ezux_tos_238929=5877205; _ALGOLIA=anonymous-c45533a4-0752-4b4d-90cb-b641b642cf4f; _ga_T5V3C8M5RY=GS1.1.1669062149.711.1.1669064843.0.0.0; hitCounter=0' To get a particular cookie, you would parse by a semicolon and then split it into name-value pairs. However, cookies can have more than just a name and value. For example, most cookies have an expiration date. But this is not readable by JavaScript. Even odder, while the of is a list of all cookies, you can use: value document.cookie document.cookie = 'name=val'; To write one cookie, leaving the others alone. When writing cookies, you can set additional values, like expiration, by using semicolons. Here is an example from : MDN document.cookie =
      "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=None; Secure"; Because of how wonky this is, there are libraries out there to simplify it. MDN used to have a nice little library for it, but unfortunately, it seems to have been removed from their site. Thankfully, there are probably ten billion or so other JavaScript libraries/utilities/simple functions out there that you could use instead. Or... The Shiny New Way So as I mentioned at the start, it looks like we have (or will have, hopefully), a new modern API for working with cookies. The provides an asynchronous API to read, write, and delete cookies. It also lets you listen for changes to cookies as well. Cookie Store API As mentioned above, currently, this is only with Chrome and Edge (well, Opera and Samsung Internet as well). No idea if Safari will add this, and your guess is as good as mine. compatible To check for support, you can look for the object: cookieStorage if(!("cookieStore" in window)) {
	console.log('Not supported');
	return;
} Once you've confirmed you can use it, here are some quick examples of the methods. Getting a Cookie To get a cookie, you use . Fancy, right? It does support optionally checking for a URL scope, typically used on larger sites to restrict a cookie to be available on only a portion of it. Here's the simplest example: get let hitCounter = await cookieStore.get('hitCounter'); As mentioned before, the API is asynchronous, so you can either it or use . I prefer . await then await If the cookie doesn't exist, you'll get a response; otherwise, an object like so: null {
    "domain": null,
    "expires": null,
    "name": "hitCounter",
    "path": "/",
    "sameSite": "strict",
    "secure": true,
    "value": "7"
} Notice that the value is a string. You will need to parse it in your code if you wish to treat it as a number. Setting a Cookie As you can imagine, setting a cookie is also pretty easy. If you want to set a cookie and a value, you just do: cookieStore.set('hitCounter', 9); This will also be asynchronous, so either or be sure to use . Note that even though I pass a number, it will become a string when stored. If you want to set options, you use the form: await then const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);

cookieStore.set({
	name:'hitCounter',
	value:9, 
	expires:tomorrow
}); In this example, I simply specified a 24-hour expiration date as an option, but there are other options as well (check the for a list). set docs Deleting a Cookie Again, another simple API, but remember, it's async: cookieStore.delete('nameOfCookie'); There's also an option like where you can pass an object containing additional options. A good example here would be , and again, think of the large website needing to ensure a cookie named in a path doesn't interfere with one in another path. get path foo Cookie Monster (AKA, All the Cookies) The final method I'll show is the method which returns an array of cookies. Running on my blog returns: getAll cookieStore.getAll().then(console.log) Listening for Cookie Events One cool aspect of the API is the ability to fire off code when cookies change. So, for example: cookieStore.onchange = (event) => {
	console.log('cookie change event', event);
}; This fires a . This event contains a few interesting properties: CookieChangeEvent will tell you the type of change, being either or . type deleted changed is an array of cookies that have been changed. changed is an array of cookies that have been deleted. deleted The docs for the event don't specify why and are an array, but if I had to guess, due to the async nature of the API, it's possible to change/delete N cookies before the event can fire in response; hence needing the results in an array. changed deleted An Example While - in general - I would not recommend using cookies for projects, I did whip an incredibly simple demo that keeps track of the number of times you've visited a site. It does this using a cookie. First, the HTML: new hitCounter <h2>Cookie Store Demo 1</h2>

<p>
	You have been to this page <span id="hitCount"></span> time(s).
</p> And then the JavaScript: document.addEventListener('DOMContentLoaded', init, false);
async function init() {
	if(!("cookieStore" in window)) {
		console.log('Not supported');
		return;
	}

	cookieStore.onchange = (event) => {
		console.log('cookie change event', event);
	};

	let hitCounter = await cookieStore.get('hitCounter');

	if(!hitCounter) {
		hitCounter = { value: 0 }
	}

	hitCounter.value = parseInt(hitCounter.value,10)+1;

	try {
		await cookieStore.set('hitCounter', hitCounter.value);

		/*
		const tomorrow = new Date();
		tomorrow.setDate(tomorrow.getDate() + 1);

		cookieStore.set({
		name:'hitCounter',
		value:hitCounter.value, 
		expires:tomorrow
		});
		*/
	} catch(e) {
		console.error(e);
	}

	document.querySelector('#hitCount').innerText = hitCounter.value;

} Basically, read the cookie, and if it's null, default to 0. Then add one to it parsing it to an integer, and store the value. In theory, I don't have to ; I could just fire and forget and immediately update the DOM, but you get the idea. after await I also kept a '24 hour only version' there in the comments just for reference. You can test this demo here: , and view the code here: . https://respected-periwinkle-warlock.glitch.me https://glitch.com/edit/#!/respected-periwinkle-warlock Before moving on, a quick note about the . The browser may block writes to cookies, and if so, you will get an error: try/catch Error: An unknown error occurred while writing the cookie. If you care about this in your application, you will want to pay attention to the error.

I Tested the Web Share API: Here Are the Results

A Simple Web Component for Building a Slideshow

My Blog

A Guide on Using the Cookie Store API

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Cat-Centric Guide to Using Web Components in Alpine.js

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

A Cat-Centric Guide to Using Web Components in Alpine.js

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps