Jak ustawić pliki cookie w przeglądarce?

Możesz ustawić plik cookie w przeglądarce na kilka sposobów.

1. Przez nagłówek HTTP Set-Cookie z serwera. To jest główna metoda ustawiania plików cookie, która odbywa się po stronie serwera. Serwer wysyła do przeglądarki nagłówek Set-Cookie, który instruuje przeglądarkę, aby zapisała określoną parę klucz-wartość.

   Przykład odpowiedzi HTTP z serwera:

   HTTP/1.1 200 OK
   Content-Type: text/html
   Set-Cookie: username=johndoe; Expires=Thu, 21 Dec 2023 12:00:00 GMT; Path=/; Secure; HttpOnly
   Set-Cookie: settings=theme=dark&lang=en; Path=/
   

   Parametry nagłówka Set-Cookie:

   • name=value: Nazwa i wartość pliku cookie. Obowiązkowy parametr.
   • Expires=<date>: Data i czas wygaśnięcia pliku cookie. Jeśli nie podano, plik cookie jest sesyjny i jest usuwany po zamknięciu przeglądarki. Format daty - RFC 1123.
   • Max-Age=<seconds>: Maksymalny czas życia pliku cookie w sekundach. Ma priorytet nad Expires.
   • Domain=<domain>: Domena, dla której plik cookie jest dostępny. Domyślnie bieżąca domena (ale nie subdomeny).
   • Path=<path>: Ścieżka na serwerze, dla której plik cookie jest dostępny. Domyślnie korzeń /.
   • Secure: Flaga wskazująca, że plik cookie powinien być wysyłany tylko przez HTTPS.
   • HttpOnly: Flaga wskazująca, że plik cookie jest niedostępny dla JavaScript przez document.cookie. Chroni przed atakami XSS.
   • SameSite=<mode>: Zarządza wysyłaniem pliku cookie przy żądaniach cross-site. Możliwe wartości: Strict, Lax (domyślnie), None.

2. Przez JavaScript po stronie klienta. Za pomocą obiektu document.cookie można odczytywać, zapisywać i usuwać pliki cookie.

   Zapisywanie pliku cookie:

   // Ustawianie prostego pliku cookie
   document.cookie = "username=johndoe";
   
   // Ustawianie pliku cookie z expires, path, secure i SameSite=Lax
   const expiryDate = new Date();
   expiryDate.setTime(expiryDate.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30 dni
   document.cookie = `token=abcdef123456; expires=${expiryDate.toUTCString()}; path=/; secure; SameSite=Lax`;
   

   Odczyt plików cookie:

   // document.cookie zwraca łańcuch wszystkich dostępnych plików cookie w formacie "key1=value1; key2=value2; ..."
   console.log(document.cookie);
   

   Usuwanie pliku cookie: Aby usunąć plik cookie, należy go ustawić z datą wygaśnięcia w przeszłości.

   document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; // Ustawienie expires w przeszłości
   

   Ważne jest, aby przy usuwaniu podawać te same parametry path i domain (jeśli były ustawione), co przy tworzeniu. SameSite musi również się zgadzać, aby usunięcie było poprawne.

3. Przy użyciu bibliotek JavaScript innych firm. Istnieją biblioteki upraszczające pracę z plikami cookie (np. js-cookie). Zapewniają one wygodniejsze API do ustawiania, odczytywania i usuwania plików cookie.

   Przykład z js-cookie:

   // Dołączenie biblioteki
   // <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
   
   // Ustawianie pliku cookie
   Cookies.set('username', 'johndoe');
   
   // Ustawianie pliku cookie z opcjami
   Cookies.set('token', 'abcdef123456', { expires: 30, path: '/', secure: true, sameSite: 'Lax' }); // expires w dniach
   
   // Odczyt plików cookie
   const username = Cookies.get('username'); // Zwraca 'johndoe' lub undefined
   const allCookies = Cookies.get(); // Zwraca obiekt ze wszystkimi plikami cookie
   
   // Usuwanie plików cookie
   Cookies.remove('username');
   Cookies.remove('token', { path: '/' }); // Podanie ścieżki, jeśli była ustawiona przy tworzeniu