The new Cookie Store API

Внезапно узнал, что уже 4 года как существует новое API для работы с куками, которое давно доступно в Chrome, недавно стало доступно в Safari и все еще недоступно в Firefox - Cookie Store API

Новое API намного удобнее. Хотя любое API, по сравнению со старым, будет удобнее.

Первое, что бросается в глаза - это человеческий интерфейс для установки. Если вам нужно просто установить значение - cookieStore.set("cookie1", "cookie1-value");. Если вам нужна полная настройка:

cookieStore.set({
  name: 'theme',
  value: 'dark',
  path: '/',
  partitioned: false,
  sameSite: 'strict',
});

Второе, что бросается в глаза - это то, что все взаимодействие стало асинхронным

  try {
    await cookieStore.set("cookie1", "cookie1-value");
  } catch (error) {
    console.log(`Error setting cookie1: ${error}`);
  }

Тут я не совсем понял смысла от асинхронщины, но методы будут бросать ошибки - что тоже хорошо.

Еще 1 фича не бросается в глаза, но она очень крутая - можно наконец-то подписаться на изменения кук и увидеть измененные и удаленные куки

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

Пример использования из статьи: синхронизируем состояние стора с состоянием куки

cookieStore.addEventListener('change', (event) => {
 const deleted = ev.deleted.find((c) => c.name === THEME_COOKIE_NAME);

 if (deleted) {
  setStoredTheme(undefined);
  return;
 }

 const changed = ev.changed.find((c) => c.name === THEME_COOKIE_NAME);

 if (changed) {
  setStoredTheme(changed.value);
  return;
 }
})

В общем, выглядит многообещающе. Ждем открытия без флага в Firefox и можно юзать. Но если хочется уже использовать, то должны быть рабочие полифилы.

https://fotis.xyz/posts/the-new-cookie-store-api/

#development #javascript #cookie