Wprowadzenie do Cookies

Cookies (ciasteczka) to niewielkie fragmenty danych przechowywane w przeglądarce użytkownika, służące m.in. do zapamiętywania preferencji lub utrzymywania sesji logowania. Dzięki temu witryna może „pamiętać” informacje między kolejnymi wizytami lub nawet po ponownym otwarciu przeglądarki.

Jak działają cookies?

• Serwer wysyła nagłówek Set-Cookie w odpowiedzi HTTP, a przeglądarka zapisuje ciasteczko w swoim systemie plików.
• Przy każdym żądaniu do tego samego serwera, przeglądarka dołącza nagłówek Cookie z danymi.
• JavaScript w przeglądarce może również odczytywać i ustawiać cookies, choć z pewnymi ograniczeniami (domeny, ścieżki, polityka bezpieczeństwa).

Podstawy – odczyt, zapis i usuwanie cookie w JavaScript

JavaScript umożliwia dostęp do ciasteczek przez document.cookie – jest to jednak trochę niewygodne, bo trzymane są tam wszystkie cookies w jednym ciągu znaków, rozdzielone średnikami.

Zapisywanie cookie

• nazwa=wartosc - klucz i wartość ciasteczka.
• expires / max-age - data ważności, po której cookie zostanie usunięte (w tym przykładzie – styczeń 2038).
• path - określa, do jakiej ścieżki URL cookie ma być dołączane (np. / – dla całej witryny).

Odczytywanie cookie

Aby znaleźć konkretną wartość, często sięga się po split lub stosuje dodatkowe biblioteki, bo document.cookie zwraca wszystkie ciasteczka w jednym łańcuchu znaków.

Usuwanie cookie

Aby usunąć cookie, ustaw jego datę ważności w przeszłości:

// Zapisywanie cookie
document.cookie = "nazwa=wartosc; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";

// Odczytywanie cookie
const allCookies = document.cookie; // "nazwa=wartosc; inneCookie=inneWartosc; ..."

// Usuwanie cookie
document.cookie = "nazwa=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

<h1>Prosty skrypt: zapisywanie i usuwanie ciasteczek</h1>
  <button id="setBtn">Ustaw cookie</button>
  <button id="removeBtn">Usuń cookie</button>

  <script>
    // Po kliknięciu „Ustaw cookie”:
    // Tworzymy cookie "myCookie" z wartością "Hello"
    // max-age=86400 -> 1 dzień (86400 sekund)
    document.getElementById('setBtn').addEventListener('click', () => {
      document.cookie = "myCookie=Hello; path=/; max-age=86400";
      alert("Cookie 'myCookie' zostało ustawione.");
    });

    // Po kliknięciu „Usuń cookie”:
    // Ustawiamy je z datą wygaśnięcia w przeszłości lub max-age=0
    document.getElementById('removeBtn').addEventListener('click', () => {
      document.cookie = "myCookie=; path=/; max-age=0";
      alert("Cookie 'myCookie' zostało usunięte.");
    });
  </script>

Podsumowanie

• Cookies to sposób przechowywania niewielkich informacji w przeglądarce.
• Podstawowe operacje to ustawianie (z expires lub max-age), odczyt (parsowanie document.cookie) i usuwanie (ustawiając datę ważności w przeszłości).
• JavaScript zapewnia minimalne wsparcie (document.cookie), często używa się funkcji pomocniczych lub bibliotek (np. js-cookie), aby uprościć zarządzanie ciasteczkami.
• Należy pamiętać o aspektach bezpieczeństwa (np. HttpOnly, Secure, SameSite), szczególnie gdy przechowuje się w ciasteczkach wrażliwe dane.