Перейти к основному содержимому

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

·167 слов·1 минута·
Александр Мунько
Автор
Александр Мунько
Любитель порассказывать про Фронтенд
Полезные ссылки

В браузере у нас есть устоявшийся способ работы с куками – 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.