Cookie Store - Nowoczesne API do zarządzania ciasteczkami

  • javascript

Cookie Store API od lipca 2025 roku, dostępne jest w każdej liczączej się przeglądarce internetowej:

  • Chrome / Edge 87+
  • Firefox 140+
  • Safari 18.4+

Źródło: Can I use

Cookie Store API zastępuje document.cookie uwalniając nas od jego ograniczeń. Głównymi zaletami Cookie Store API są:

  • Asynchroniczność: API jest asynchroniczne, co pozwala uniknąć blokowania głównego wątku.
  • Bezpieczeństwo: Metody zwracają Promise, więc możliwa jest obsługa błędów w blokach try...catch.
  • Łatwość użycia: API zawiera proste metody do zarządzania ciasteczkami:
    • cookieStore.getAll() - pobiera wszystkie ciasteczka.
    • cookieStore.get() - pobiera pojedyncze ciasteczko.
    • cookieStore.set() - ustawia nowe ciasteczko.
    • cookieStore.delete() - usuwa ciasteczko.
  • Obsługa zdarzeń: Możesz słuchać na zmiany -> cookieStore.addEventListener('change', callback).
  • Service Workers: Cookie Store API jest dostępne również w Service Workers.

Przykłady użycia

Ustawienie ciasteczka

await cookieStore.set({
    name: 'myCookie',
    value: 'cookieValue',
    expires: new Date(Date.now() + 3600 * 1000), // 1 godzina
});

await cookieStore.set('myCookie2', 'cookieValue2', {
    expires: new Date(Date.now() + 3600 * 1000), // 1 godzina
});

await cookieStore.set('myCookie2', 'cookieValue2'); // ciasteczko sesyjne

Pobranie wszystkich ciasteczek

await cookieStore.set('cookie-1', 'value1');
await cookieStore.set('cookie-2', 'value2');

const cookies = await cookieStore.getAll();
console.log(cookies); // tablica obiektów Cookie

Pobranie pojedynczego ciasteczka

const cookie = await cookieStore.get('cookie-1');
console.log(cookie); // obiekt Cookie lub undefined jeżeli nie istnieje

Usunięcie ciasteczka

await cookieStore.delete('cookie-1');
const cookie = await cookieStore.get('cookie-1');
console.log(cookie); // undefined, ponieważ ciasteczko zostało usunięte

Obsługa zdarzeń

cookieStore.addEventListener('change', (event) => {
  console.log('Stworzone / Zmienione:', event.changed);
  console.log('Usunięte:', event.deleted);
});

Obsługa błędów

try {
    await cookieStore.set();
} catch (error) {
    console.log(error); // TypeError: Failed to execute 'set' on 'CookieStore': 1 argument required, but only 0 present.
}

Bibliografia

Naturalnie więcej informacji możesz znaleźć w MDN oraz na stronie W3C: