JavaScript og cookies

Articles

Denne artikel forklarer JavaScript og cookies.

Vi forklarer alt grundigt trin for trin, fra grundlæggende om cookies, læsning og skrivning, sikkerhed, til praktiske eksempler.

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 og cookies

Cookie refererer til små datastykker gemt i brugerens browser. De bruges primært til følgende formål:.

Brugergodkendelse (opretholdelse af login-status)
Gemning af brugerindstillinger (sprog, tema osv.)
Sporing (browsinghistorik osv.)

I JavaScript kan du læse og skrive cookies ved hjælp af document.cookie.

Oprettelse (skrivning) af cookies

Cookies oprettes med følgende syntaks:.

1document.cookie = "username=JohnDoe";

Denne kode gemmer en cookie med navnet "username=JohnDoe" i browseren.

Oprettelse af cookies med en udløbsdato

Cookies kan have en udløbsdato sat. Hvis der ikke angives en udløbsdato, behandles den som en sessionscookie og slettes, når browseren lukkes.

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}`);

expires attributten angiver cookiens udløbsdato i UTC-format.
path attributten angiver stien, hvor cookien sendes. / betyder hele siden.
Hvis du angiver SameSite=None, vil Cookieen blive sendt selv ved forespørgsler på tværs af sider. Men i dette tilfælde skal du altid inkludere Secure attributten.
Ved at angive Secure bliver Cookieen kun sendt via HTTPS, hvilket øger sikkerheden.
Ved at referere til document.cookie kan du hente alle tilgængelige Cookies på den aktuelle side som en streng.
Ved at bruge console.log kan du kontrollere forskellen mellem de faktiske Cookie-værdier, der er sat i browseren, og de værdier, der kan hentes.

Hente (læse) cookies

Du kan hente alle cookies som en streng med 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"

Returneringsværdien af document.cookie er en enkelt streng, hvor alle Cookies er sammenkædet i formatet 'nøgle=værdi;'.
Det er praktisk at bruge en funktion til at analysere denne streng og udtrække den ønskede værdi.

Funktion til at hente værdien af en cookie

 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"

Denne funktion opdeler nøgler og værdier med split() og returnerer værdien, hvis den matcher den angivne nøgle.
Ved at anvende decodeURIComponent kan du korrekt hente kodede tegn.
Hvis den tilsvarende nøgle ikke findes, returneres null.

Slette cookies

En cookie kan slettes ved at sætte dens udløbsdato til en dato i fortiden.

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"

Ved at tildele en tom værdi til username og sætte udløbsdatoen til en tid i fortiden, vil den blive slettet.
Når du sletter en Cookie, skal du også matche path, SameSite og Secure attributterne med dem, der blev brugt ved oprettelsen.
I dette eksempel slettes username, mens andre Cookies såsom theme=dark forbliver.

Cookieindstillinger

Du kan angive forskellige indstillinger for at styre en cookies opførsel. De vigtigste er som følger:.

Angiver cookiens udløbsdato i UTC-format. Hvis ikke angivet, bliver cookien en sessionscookie og slettes, når browseren lukkes.

Angiver cookiens udløbsdato i sekunder. Dette har forrang over `expires`.

Angiver stien, som cookien sendes til. For eksempel, hvis du angiver `/admin`, sendes cookien kun til sider under den sti.

Angiver domænet, som cookien er gyldig for. Normalt sættes det til det aktuelle domæne, men du kan anvende det på alle underdomæner, såsom `.example.com`.

Når denne attribut er angivet, sendes cookien kun via HTTPS. For øget sikkerhed bør du altid angive denne attribut for følsomme oplysninger.

Styrer om cookies sendes ved cross-site forespørgsler. Du kan angive en af følgende tre værdier:.

- `Strict`
    Cookies sendes kun ved forespørgsler fra samme side.

- `Lax`
    Cookies sendes ved almindelig navigation, men med nogle begrænsninger.

- `None`
    Cookies kan også sendes ved cross-site forespørgsler. Dog kræves attributten `Secure` også.

Eksempel: Sikker cookie

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

Hvis du angiver secure, sendes Cookieen kun via HTTPS-kommunikation.
Hvis du angiver SameSite=Strict, sendes Cookieen ikke ved cross-site forespørgsler, hvilket er effektivt som en CSRF-foranstaltning.
Sådanne sikre attributter er essentielle for vigtige Cookies, der bruges til autentifikation eller sessionsstyring.

Kodning og dekodning

Da cookie-værdier kan indeholde specialtegn, er det sikrere at bruge encodeURIComponent.

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"

Med encodeURIComponent kan du sikkert gemme mellemrum, symboler og lignende i en Cookie.
Når du læser den, skal du bruge decodeURIComponent for at få den oprindelige streng tilbage.
I dette eksempel bruges max-age=604800 til at sætte udløbsperioden til 7 dage (604.800 sekunder). Dette er en metode til at angive udløbsdato, svarende til expires. max-age kan angives i sekunder og er ofte nemmere at bruge.

Praktisk eksempel: Gemme og indlæse et tema

Følgende er et eksempel på at gemme brugerens valgte tema i en cookie og automatisk anvende det ved næste besøg.

 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>

setTheme funktionen gemmer det valgte tema i en Cookie og kalder straks applyTheme for at opdatere skærmen.
applyTheme funktionen skifter baggrunds- og tekstfarverne på body i henhold til temaet.
I dette eksempel bevares tema-indstillingen i en uge, da max-age=604800 er angivet.
Da brugerens valg kan fastholdes ved genbesøg på siden, forbedres brugeroplevelsen.

Cookiebegrænsninger og forholdsregler

Vær opmærksom på følgende punkter, når du bruger cookies:.

Størrelsesbegrænsninger Størrelsen på en enkelt cookie er begrænset til ca. 4KB.
Begrænsning på antallet af cookies, der kan gemmes Afhængigt af browseren kan du kun gemme omkring 20 til 50 per domæne.
Sikkerhedsforanstaltninger Indholdet af Cookies gemmes grundlæggende som klar tekst, så det er ikke egnet til opbevaring af følsomme oplysninger som adgangskoder.
Cookies utilgængelige fra JavaScript Cookies med HttpOnly-attribut kan ikke læses fra JavaScript af sikkerhedshensyn.

Server og `Cookies`

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

Nogle Cookie-attributter, såsom HttpOnly, kan ikke sættes via JavaScript. Disse skal sættes på serversiden.

Sammendrag

Manipulation af Cookies med JavaScript kan forbedre brugeroplevelsen og opretholde tilstand. Men vær opmærksom på følgende punkter for at håndtere dem sikkert og korrekt.

Gem kun de minimum nødvendige oplysninger Ud fra et privatlivs- og sikkerhedsperspektiv bør du undgå at gemme personlige eller følsomme oplysninger og kun gemme nødvendige data.
Indstil sikkerheds-attributter korrekt Indstil attributter som Secure og SameSite for at forhindre cross-site-angreb som XSS og CSRF.
Kodning og afkodning af data Brug encodeURIComponent og decodeURIComponent til sikkert at gemme og læse Cookie-værdier, så specialtegn og japansk håndteres korrekt.

Ved at lære den korrekte brug af Cookies kan du bygge mere avancerede og sikre webapplikationer.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Shared Worker i JavaScript

JavaScript og cookies

YouTube Video

JavaScript og cookies

Oprettelse (skrivning) af cookies

Oprettelse af cookies med en udløbsdato

Hente (læse) cookies

Funktion til at hente værdien af en cookie

Slette cookies

Cookieindstillinger

Eksempel: Sikker cookie

Kodning og dekodning

Praktisk eksempel: Gemme og indlæse et tema

Cookiebegrænsninger og forholdsregler

Server og Cookies

Sammendrag

YouTube Video

Server og `Cookies`