Cum se setează cookie-urile în browser?

Poți seta cookie-uri în browser în mai multe moduri.

1. Prin antetul HTTP Set-Cookie de pe server. Aceasta este metoda principală de a seta cookie-uri, care are loc pe partea serverului. Serverul trimite browserului antetul Set-Cookie, care indică browserului să salveze o pereche cheie-valoare specifică.

   Exemplu de răspuns HTTP de la server:

   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=/
   

   Parametrii antetului Set-Cookie:

   • name=value: Numele și valoarea cookie-ului. Parametru obligatoriu.
   • Expires=<date>: Data și ora când expiră cookie-ul. Dacă nu este specificat, cookie-ul este de sesiune și se șterge la închiderea browserului. Formatul datei - RFC 1123.
   • Max-Age=<seconds>: Timpul maxim de viață al cookie-ului în secunde. Are prioritate față de Expires.
   • Domain=<domain>: Domeniul pentru care este disponibil cookie-ul. În mod implicit, domeniul curent (dar nu subdomeniile).
   • Path=<path>: Calea pe server pentru care este disponibil cookie-ul. În mod implicit, calea rădăcină /.
   • Secure: Flag care indică că cookie-ul trebuie trimis doar prin HTTPS.
   • HttpOnly: Flag care indică că cookie-ul nu este accesibil prin JavaScript prin document.cookie. Protejează împotriva atacurilor XSS.
   • SameSite=<mode>: Controlează trimiterea cookie-ului în cererile cross-site. Valori posibile: Strict, Lax (implicit), None.

2. Prin JavaScript pe partea client. Cu obiectul document.cookie se pot citi, scrie și șterge cookie-uri.

   Scrierea cookie-ului:

   // Setarea unui cookie simplu
   document.cookie = "username=johndoe";
   
   // Setarea unui cookie cu expires, path, secure și SameSite=Lax
   const expiryDate = new Date();
   expiryDate.setTime(expiryDate.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30 zile
   document.cookie = `token=abcdef123456; expires=${expiryDate.toUTCString()}; path=/; secure; SameSite=Lax`;
   

   Citirea cookie-urilor:

   // document.cookie returnează un șir cu toate cookie-urile disponibile în formatul "key1=value1; key2=value2; ..."
   console.log(document.cookie);
   

   Ștergerea cookie-ului: Pentru a șterge un cookie, trebuie să îl setați cu o dată de expirare în trecut.

   document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; // Setarea expires în trecut
   

   Este important să specificați aceiași parametri path și domain (dacă au fost setați), ca și la crearea cookie-ului. SameSite trebuie să coincidă pentru o ștergere corectă.

3. Cu biblioteci JavaScript terțe. Există biblioteci care simplifică lucrul cu cookie-uri (de exemplu, js-cookie). Ele oferă o API mai convenabilă pentru setare, citire și ștergere.

   Exemplu cu js-cookie:

   // Inclusiv biblioteca
   // <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
   
   // Setarea cookie-ului
   Cookies.set('username', 'johndoe');
   
   // Setarea cookie-ului cu opțiuni
   Cookies.set('token', 'abcdef123456', { expires: 30, path: '/', secure: true, sameSite: 'Lax' }); // expires în zile
   
   // Citirea cookie-urilor
   const username = Cookies.get('username'); // Returnează 'johndoe' sau undefined
   const allCookies = Cookies.get(); // Returnează un obiect cu toate cookie-urile
   
   // Ștergerea cookie-urilor
   Cookies.remove('username');
   Cookies.remove('token', { path: '/' }); // Specificați path-ul dacă a fost setat la crearea