Zarządzanie cookies i usuwanie danych

Ciasteczka (cookies) pozwalają przeglądarce przechowywać dane między kolejnymi wizytami na stronie. W codziennej praktyce JavaScript możesz je ustawiać, odczytywać i usuwać, a zatem zarządzać nimi tak, by zapamiętywały preferencje użytkownika czy informacje sesyjne.


Podstawy zarządzania cookies w JS

  • Ustawianie ciasteczka
    • document.cookie = "nazwa=wartosc; path=/; expires=..."
    • Parametry takie jak path, expires (lub max-age) określają ważność i zasięg.
  • Odczytywanie
    • document.cookie zwraca wszystkie ciasteczka w jednym ciągu znaków, np. "imie=Ala; token=abc123".
    • Potrzebna jest najczęściej mała funkcja pomocnicza, by wyłuskać pojedynczą wartość.
  • Usuwanie
    • Ustaw wartość cookie na pustą, z datą wygaśnięcia w przeszłości lub max-age=0.
    • document.cookie = "nazwa=; path=/; max-age=0";
Przykład
// Ustawia ciasteczko o danej nazwie i wartości na określony czas (days)
function setCookie(name, value, days) {
  const d = new Date();
  d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = "expires=" + d.toUTCString();
  document.cookie = name + "=" + encodeURIComponent(value) + ";" + expires + ";path=/";
}

// Odczytuje wartość ciasteczka o podanej nazwie
function getCookie(name) {
  const nameEQ = name + "=";
  const ca = document.cookie.split(';');
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i].trim();
    if (c.indexOf(nameEQ) === 0) {
      return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
  }
  return null;
}

// Usuwa ciasteczko o podanej nazwie
function removeCookie(name) {
  // Ustawiamy datę ważności w przeszłości
  document.cookie = name + "=; path=/; max-age=0";
}

Podsumowanie

  • Zarządzanie cookies polega głównie na umiejętnym ustawianiu ich wartości i daty ważności, a także na ich odczycie i usuwaniu w razie potrzeby.
  • Ustawianie (setCookie) – klucz, wartość, data wygaśnięcia (expires lub max-age) i ścieżka (path).
  • Odczyt (getCookie) – trzeba przeanalizować document.cookie, który zawiera wszystkie ciasteczka w jednym ciągu.
  • Usuwanie (removeCookie) – ustaw wartość na pustą i wygaśnięcie w przeszłości (max-age=0).
  • W praktycznych projektach można sięgnąć po biblioteki (np. js-cookie), by te operacje były jeszcze wygodniejsze i mniej podatne na błędy.