Hoe stel je cookies in de browser in?

U kunt cookies op verschillende manieren in de browser instellen.

1. Via de HTTP-header Set-Cookie vanaf de server. Dit is de belangrijkste methode om cookies in te stellen, die aan de serverzijde plaatsvindt. De server stuurt de header Set-Cookie naar de browser, die aangeeft dat een bepaald sleutel-waarde paar moet worden opgeslagen.

   Voorbeeld van een HTTP-respons van de 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=/
   

   Parameters van de header Set-Cookie:

   • name=value: Naam en waarde van de cookie. Verplicht.
   • Expires=<date>: Datum en tijd waarop de cookie verloopt. Als niet gespecificeerd, is de cookie een sessiecookie en wordt deze verwijderd bij het sluiten van de browser. Datumformaat - RFC 1123.
   • Max-Age=<seconds>: Maximale levensduur van de cookie in seconden. Heeft prioriteit boven Expires.
   • Domain=<domain>: Domein waarvoor de cookie beschikbaar is. Standaard de huidige domein (maar geen subdomeinen).
   • Path=<path>: Pad op de server waarvoor de cookie beschikbaar is. Standaard de root /.
   • Secure: Vlag die aangeeft dat de cookie alleen via HTTPS moet worden verzonden.
   • HttpOnly: Vlag die aangeeft dat de cookie niet toegankelijk is via JavaScript met document.cookie. Beschermt tegen XSS-aanvallen.
   • SameSite=<mode>: Beheert het verzenden van cookies bij cross-site verzoeken. Mogelijke waarden: Strict, Lax (standaard), None.

2. Via JavaScript aan de clientzijde. Met het object document.cookie kan je cookies lezen, schrijven en verwijderen.

   Cookie schrijven:

   // Eenvoudige cookie instellen
   document.cookie = "username=johndoe";
   
   // Cookie met expires, path, secure en SameSite=Lax instellen
   const expiryDate = new Date();
   expiryDate.setTime(expiryDate.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30 dagen
   document.cookie = `token=abcdef123456; expires=${expiryDate.toUTCString()}; path=/; secure; SameSite=Lax`;
   

   Cookies lezen:

   // document.cookie geeft een string van alle beschikbare cookies in het formaat "key1=value1; key2=value2; ..."
   console.log(document.cookie);
   

   Cookie verwijderen: Om een cookie te verwijderen, moet je deze instellen met een vervaldatum in het verleden.

   document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; // vervaldatum in het verleden
   

   Het is belangrijk dat bij het verwijderen dezelfde path en domain parameters worden gebruikt (indien ingesteld), als bij het aanmaken. SameSite moet ook overeenkomen voor een correcte verwijdering.

3. Met behulp van third-party JavaScript bibliotheken. Er zijn bibliotheken die het werken met cookies vereenvoudigen (bijvoorbeeld js-cookie). Ze bieden een handigere API voor het instellen, verkrijgen en verwijderen van cookies.

   Voorbeeld met js-cookie:

   // Bibliotheek toevoegen
   // <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
   
   // Cookie instellen
   Cookies.set('username', 'johndoe');
   
   // Cookie met opties instellen
   Cookies.set('token', 'abcdef123456', { expires: 30, path: '/', secure: true, sameSite: 'Lax' }); // expires in dagen
   
   // Cookies lezen
   const username = Cookies.get('username'); // Geeft 'johndoe' of undefined
   const allCookies = Cookies.get(); // Geeft een object met alle cookies
   
   // Cookies verwijderen
   Cookies.remove('username');
   Cookies.remove('token', { path: '/' }); // Geef pad op als het bij het instellen werd gebruikt