JavaScript en Cookies

Articles

Dit artikel legt JavaScript en cookies uit.

We leggen alles stap voor stap zorgvuldig uit: van de basisprincipes van cookies, lezen en schrijven, beveiliging, tot praktische voorbeelden.

YouTube Video

javascript-cookie.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-cookie.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-cookie.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-cookie.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

JavaScript en Cookies

Cookie verwijst naar kleine stukjes gegevens die in de browser van de gebruiker worden opgeslagen. Ze worden voornamelijk gebruikt voor de volgende doeleinden:.

Gebruikersauthenticatie (het behouden van de login-status)
Het opslaan van gebruikersinstellingen (taal, thema, enz.)
Tracking (browsegeschiedenis, enz.)

In JavaScript kun je cookies lezen en schrijven met document.cookie.

Cookies aanmaken (schrijven)

Cookies worden aangemaakt met de volgende syntaxis:.

1document.cookie = "username=JohnDoe";

Deze code slaat een cookie genaamd "username=JohnDoe" op in de browser.

Cookies aanmaken met een vervaldatum

Voor cookies kan een vervaldatum worden ingesteld. Als er geen vervaldatum is ingesteld, wordt het beschouwd als een sessiecookie en verwijderd wanneer de browser wordt gesloten.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3const cookieText = "username=JohnDoe; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4document.cookie = cookieText;
5console.log(`Cookie Text  : ${cookieText}`);
6console.log(`Cookie Value : ${document.cookie}`);

Het attribuut expires geeft de vervaldatum van de cookie op in UTC-formaat.
Het attribuut path geeft het pad op waar de cookie naartoe wordt gestuurd. / betekent de gehele site.
Als je SameSite=None opgeeft, wordt de Cookie ook verzonden bij cross-site verzoeken. In dit geval moet je echter altijd het Secure-attribuut toevoegen.
Door Secure op te geven, wordt de Cookie beperkt tot alleen HTTPS-communicatie, wat de veiligheid verhoogt.
Door naar document.cookie te verwijzen, kun je alle beschikbare Cookies op de huidige pagina als een string ophalen.
Met console.log kun je het verschil controleren tussen de daadwerkelijk in de browser ingestelde Cookie-waarden en de waarden die kunnen worden opgehaald.

Het ophalen (lezen) van cookies

Je kunt alle cookies als een string ophalen met document.cookie.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3document.cookie = "theme=dark; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4
5console.log(document.cookie);
6// Output: "username=JohnDoe; theme=dark"

De geretourneerde waarde van document.cookie is een enkele string waarin alle Cookies aan elkaar geregen zijn in het formaat 'key=value;'.
Het is handig om een functie te gebruiken om deze string te parsen en de gewenste waarde eruit te halen.

Functie om de waarde van een cookie op te halen

 1function getCookie(name) {
 2    const cookies = document.cookie.split('; ');
 3    for (const cookie of cookies) {
 4        const [key, value] = cookie.split('=');
 5        if (key === name) {
 6            return decodeURIComponent(value);
 7        }
 8    }
 9    return null;
10}
11
12console.log(getCookie("username")); // "JohnDoe"

Deze functie splitst de sleutels en waarden met split() en retourneert de waarde als deze overeenkomt met de opgegeven sleutel.
Met behulp van decodeURIComponent kun je gecodeerde tekens correct ophalen.
Als de overeenkomstige sleutel niet bestaat, wordt null geretourneerd.

Cookies verwijderen

Een cookie kan worden verwijderd door de vervaldatum op een datum in het verleden te zetten.

1document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=None; Secure";
2
3console.log(document.cookie);
4// Output: "theme=dark"

Door een lege waarde toe te wijzen aan username en de vervaldatum in het verleden te zetten, wordt deze verwijderd.
Bij het verwijderen van een Cookie moet je ook de path, SameSite en Secure attributen laten overeenkomen met de waarden die bij het aanmaken zijn gebruikt.
In dit voorbeeld wordt username verwijderd en blijven andere Cookies, zoals theme=dark, bewaard.

Cookie-opties

Je kunt verschillende opties specificeren om het gedrag van een cookie te bepalen. De belangrijkste zijn als volgt:.

Specificeert de vervaldatum van de cookie in UTC-formaat. Als dit niet is gespecificeerd, wordt de cookie een sessiecookie en wordt deze verwijderd als de browser wordt gesloten.

Specificeert de vervaldatum van de cookie in seconden. Dit heeft voorrang op `expires`.

Specificeert het pad waarvoor de cookie zal worden verzonden. Bijvoorbeeld, als je `/admin` specificeert, wordt de cookie alleen verzonden naar pagina's onder dat pad.

Specificeert het domein waarvoor de cookie geldig is. Gewoonlijk is het ingesteld voor het huidige domein, maar je kunt het toepassen op alle subdomeinen, zoals `.example.com`.

Wanneer dit attribuut is opgegeven, wordt de cookie alleen via HTTPS verzonden. Voor meer veiligheid, stel dit attribuut altijd in voor gevoelige informatie.

Bepaalt of cookies worden verzonden bij cross-site verzoeken. Je kunt een van de volgende drie waarden opgeven:.

- `Strict`
    Cookies worden alleen verzonden bij verzoeken van dezelfde site.

- `Lax`
    Cookies worden verzonden bij normale navigatie, maar met enkele beperkingen.

- `None`
    Cookies kunnen zelfs worden verzonden bij cross-site verzoeken. Het `Secure`-attribuut is dan echter ook vereist.

Voorbeeld: Veilige cookie

1document.cookie = "sessionId=abc123; secure; SameSite=Strict";

Als je secure opgeeft, wordt de Cookie alleen verzonden via HTTPS-communicatie.
Als je SameSite=Strict opgeeft, wordt de Cookie niet verzonden bij cross-site verzoeken, waardoor het effectief is als een CSRF-maatregel.
Dergelijke beveiligde attributen zijn essentieel voor belangrijke Cookies die worden gebruikt voor authenticatie of sessiebeheer.

Coderen en decoderen

Aangezien cookie-waarden speciale tekens kunnen bevatten, is het veiliger om encodeURIComponent te gebruiken.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3
4const username = "JohnDoe";
5document.cookie =
6    "username=" + encodeURIComponent(username) +
7    "; max-age=604800; path=/; SameSite=None; Secure";
8
9console.log(decodeURIComponent(getCookie("username"))); // "JohnDoe"

Door gebruik te maken van encodeURIComponent kun je veilig spaties, symbolen enzovoorts in een Cookie opslaan.
Gebruik bij het uitlezen decodeURIComponent om de oorspronkelijke string terug te krijgen.
In dit voorbeeld wordt max-age=604800 gebruikt om de vervalperiode op 7 dagen (604.800 seconden) te zetten. Dit is een methode om de vervaldatum op te geven, vergelijkbaar met expires. max-age kan in seconden worden opgegeven en is vaak eenvoudiger te gebruiken.

Praktisch voorbeeld: Een thema opslaan en laden

Hieronder staat een voorbeeld van het opslaan van het door de gebruiker gekozen thema in een cookie en het automatisch toepassen ervan bij het volgende bezoek.

 1function setTheme(theme) {
 2    document.cookie =
 3        "theme=" + encodeURIComponent(theme) +
 4        "; max-age=604800; path=/; SameSite=None; Secure"; // 1 week
 5    applyTheme(theme);
 6}
 7
 8function applyTheme(theme) {
 9    document.body.style.backgroundColor = theme === "dark" ? "#333" : "#fff";
10    document.body.style.color = theme === "dark" ? "#fff" : "#000";
11}
12
13function getCookie(name) {
14    const cookies = document.cookie.split('; ');
15    for (const cookie of cookies) {
16        const [key, value] = cookie.split('=');
17        if (key === name) {
18            return decodeURIComponent(value);
19        }
20    }
21    return null;
22}
23
24const savedTheme = getCookie("theme");
25if (savedTheme) {
26    applyTheme(savedTheme);
27}

1<button onclick="setTheme('light')">Light</button>
2<button onclick="setTheme('dark')">Dark</button>

De setTheme-functie slaat het geselecteerde thema op in een Cookie en roept direct applyTheme aan om het scherm bij te werken.
De applyTheme-functie wijzigt de achtergrond- en tekstkleur van de body volgens het thema.
In dit voorbeeld blijft de thema-instelling een week behouden, omdat max-age=604800 is ingesteld.
Omdat de keuze van de gebruiker behouden blijft bij een volgend bezoek aan de pagina, wordt de gebruikerservaring verbeterd.

Beperkingen en waarschuwingen bij cookies

Let op de volgende punten bij het gebruik van cookies:.

Groottebeperkingen De grootte van een enkele cookie is beperkt tot ongeveer 4KB.
Beperking van het aantal cookies dat kan worden opgeslagen Afhankelijk van de browser kunt u ongeveer 20 tot 50 per domein opslaan.
Beveiligingsmaatregelen De inhoud van Cookies wordt in principe als platte tekst opgeslagen, dus het is niet geschikt voor het opslaan van vertrouwelijke informatie zoals wachtwoorden.
Cookies die niet toegankelijk zijn vanuit JavaScript Cookies met het attribuut HttpOnly kunnen om veiligheidsredenen niet door JavaScript worden gelezen.

Server en `Cookies`

1Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

Sommige Cookie-attributen, zoals HttpOnly, kunnen niet via JavaScript worden ingesteld. Deze moeten aan de serverzijde worden ingesteld.

Samenvatting

Het manipuleren van Cookies via JavaScript kan de gebruikerservaring verbeteren en de status behouden. Houd echter rekening met de volgende punten voor een veilige en correcte omgang.

Sla alleen de minimaal noodzakelijke informatie op Vermijd vanuit privacy- en veiligheidsoogpunt het opslaan van persoonlijke of gevoelige informatie, en registreer alleen de noodzakelijke gegevens.
Stel beveiligingsattributen correct in Stel attributen zoals Secure en SameSite in om cross-site-aanvallen zoals XSS en CSRF te voorkomen.
Gegevens coderen en decoderen Gebruik encodeURIComponent en decodeURIComponent om Cookie-waarden veilig op te slaan en te lezen zodat speciale tekens en bijvoorbeeld Japans correct worden afgehandeld.

Door het juiste gebruik van Cookies te leren, kunt u meer geavanceerde en veilige webapplicaties bouwen.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Shared Worker in JavaScript

JavaScript en Cookies

YouTube Video

JavaScript en Cookies

Cookies aanmaken (schrijven)

Cookies aanmaken met een vervaldatum

Het ophalen (lezen) van cookies

Functie om de waarde van een cookie op te halen

Cookies verwijderen

Cookie-opties

Voorbeeld: Veilige cookie

Coderen en decoderen

Praktisch voorbeeld: Een thema opslaan en laden

Beperkingen en waarschuwingen bij cookies

Server en Cookies

Samenvatting

YouTube Video

Server en `Cookies`