Cookie Store API - современный подход к работе с куками

14.04.2025, Ссылка на статью, Документация на MDN

В браузере у нас есть устоявшийся способ работы с куками - document.cookie, но API по работе с ними не самое удобное:

// Записываем куку со значением темы
document.cookie = 'theme=dark; max-age=31536000; path=/';
 
// Читаем куку со значением темы
const cookies = Object.fromEntries(
	document.cookie
		.split(';')
		.map((cookie) => {
			const preparedCookie = cookie.trim();
			const delimiterPos = preparedCookie.indexOf('=');
			return [
				preparedCookie.slice(0, delimiterPos),
				preparedCookie.slice(delimiterPos + 1)
			];
		})
);
const theme = cookies['theme'] ?? 'light';

С новым CookieStore API работать с куками становится очень легко:

await cookieStore.set({
	name: 'theme',
	value: 'dark',
	expires: Date.now() + 31536000,
});
 
const { value: theme } = await cookieStore.get('theme');

Помимо удобного и понятного декларативного API мы получили возможность отследить что кука поменялась или была удалена, или вообще подписаться на изменение всех кук страницы с помощью CookieStorageManager. И это сработает даже в том случае, если кука была изменена на другой странице.

Единственный минус - только появилось в Firefox Nightly 139 и наполовину в свежем Safari 18.4.