JavaScript och cookies

Articles

Den här artikeln förklarar JavaScript och cookies.

Vi kommer noggrant att förklara allt steg för steg, från grunderna om cookies, läsning och skrivning, säkerhet till praktiska exempel.

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

Cookie avser små datastycken som lagras i användarens webbläsare. De används främst för följande ändamål:.

Användarautentisering (upprätthålla inloggningsstatus)
Spara användarinställningar (språk, tema osv.)
Spårning (webbhistorik osv.)

I JavaScript kan du läsa och skriva cookies med hjälp av document.cookie.

Skapa (skriva) cookies

Cookies skapas med följande syntax:.

1document.cookie = "username=JohnDoe";

Den här koden sparar en cookie med namnet "username=JohnDoe" i webbläsaren.

Skapa cookies med utgångsdatum

Cookies kan ha ett utgångsdatum angivet. Om inget utgångsdatum anges behandlas den som en sessionscookie och raderas när webbläsaren stängs.

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

Attributet expires anger cookiens utgångsdatum i UTC-format.
Attributet path anger sökvägen där cookien skickas. / betyder hela webbplatsen.
Om du anger SameSite=None, kommer Cookie att skickas även vid tvärgående (cross-site) förfrågningar. Men i detta fall måste du alltid inkludera attributet Secure.
Om du anger Secure begränsas Cookie till endast HTTPS-kommunikation, vilket förbättrar säkerheten.
Genom att hänvisa till document.cookie kan du få alla Cookie:er som är tillgängliga på den aktuella sidan som en sträng.
Genom att använda console.log kan du kontrollera skillnaden mellan de faktiska Cookie-värdena som är inställda i webbläsaren och de värden som kan hämtas.

Hämta (läsa) cookies

Du kan hämta alla cookies som en sträng 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"

Returvärdet för document.cookie är en enda sträng där alla Cookie:er är sammanfogade i formatet 'nyckel=värde;'.
Det är bekvämt att använda en funktion för att tolka denna sträng och extrahera önskat värde.

Funktion för att hämta värdet av 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"

Denna funktion delar upp nycklar och värden med hjälp av split() och returnerar värdet om det matchar den angivna nyckeln.
Genom att använda decodeURIComponent kan du korrekt hämta kodade tecken.
Om den motsvarande nyckeln inte finns returneras null.

Ta bort cookies

En cookie kan tas bort genom att ange dess utgångsdatum till ett datum i det förflutna.

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"

Genom att tilldela ett tomt värde till username och sätta utgångsdatumet till det förflutna kommer det att raderas.
När du tar bort en Cookie måste du även matcha attributen path, SameSite och Secure till de värden som användes när den skapades.
I det här exemplet tas username bort, och andra Cookie:er som theme=dark finns kvar.

Cookie-alternativ

Du kan ange olika alternativ för att styra beteendet för en cookie. De viktigaste är följande:.

Anger cookiens utgångsdatum i UTC-format. Om det inte anges blir cookien en sessionscookie och raderas när webbläsaren stängs.

Anger cookiens utgångsdatum i sekunder. Detta har företräde framför `expires`.

Anger sökvägen för vilken cookien skickas. Om du till exempel anger `/admin`, skickas cookien endast till sidor under den sökvägen.

Anger domänen för vilken cookien är giltig. Vanligtvis anges den för den aktuella domänen, men du kan använda den för alla subdomäner, såsom `.example.com`.

När detta attribut anges skickas cookien endast via HTTPS. För ökad säkerhet bör detta attribut alltid anges för känslig information.

Styr om cookies ska skickas vid cross-site-förfrågningar. Du kan ange ett av följande tre värden:.

- `Strict`
    Cookies skickas endast för förfrågningar från samma webbplats.

- `Lax`
    Cookies skickas vid normal navigering, men med vissa begränsningar.

- `None`
    Cookies kan även skickas vid cross-site-förfrågningar. Dock krävs också attributet `Secure`.

Exempel: Säker cookie

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

Om du anger secure kommer Cookie endast att skickas via HTTPS-kommunikation.
Om du anger SameSite=Strict kommer Cookie inte att skickas vid tvärgående (cross-site) förfrågningar, vilket gör det effektivt som skydd mot CSRF.
Sådana säkra attribut är viktiga för viktiga Cookie:er som används för autentisering eller sessionhantering.

Kodning och avkodning

Eftersom cookievärden kan innehålla specialtecken är det säkrare att använda 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"

Genom att använda encodeURIComponent kan du säkert lagra mellanslag, symboler och så vidare i en Cookie.
När du läser ut värdet, använd decodeURIComponent för att återställa den ursprungliga strängen.
I det här exemplet används max-age=604800 för att ställa in utgångsperioden till 7 dagar (604 800 sekunder). Detta är ett sätt att ange utgångsdatum, liknande expires. max-age kan anges i sekunder och är ofta enklare att använda.

Praktiskt exempel: Spara och ladda ett tema

Följande är ett exempel på att spara användarens valda tema i en cookie och automatiskt tillämpa det vid nästa besök.

 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>

Funktionen setTheme sparar det valda temat i en Cookie och anropar direkt applyTheme för att uppdatera skärmen.
Funktionen applyTheme ändrar bakgrunds- och textfärgen på body beroende på temat.
I det här exemplet bevaras temainställningen i en vecka eftersom max-age=604800 är angivet.
Eftersom användarens val kan bibehållas vid återbesök på sidan förbättras användarupplevelsen (UX).

Begränsningar och försiktighetsåtgärder för cookies

Observera följande punkter när du använder cookies:.

Storleksbegränsningar Storleken på en enskild cookie är begränsad till cirka 4KB.
Begränsning av antalet cookies som kan sparas Beroende på webbläsaren kan du bara spara cirka 20 till 50 per domän.
Säkerhetsåtgärder Innehållet i Cookies sparas i princip i klartext, så det passar inte för att lagra konfidentiell information som lösenord.
Cookies som inte är tillgängliga från JavaScript Cookies med attributet HttpOnly kan inte läsas från JavaScript av säkerhetsskäl.

Server och `Cookies`

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

Vissa Cookie-attribut, såsom HttpOnly, kan inte ställas in via JavaScript. Dessa måste ställas in på serversidan.

Sammanfattning

Att manipulera Cookies med JavaScript kan förbättra användarupplevelsen och upprätthålla tillstånd. Observera dock följande punkter för att hantera dem säkert och korrekt.

Lagra bara den minsta nödvändiga informationen Ur ett integritets- och säkerhetsperspektiv, undvik att lagra personlig eller känslig information och spara endast nödvändig data.
Ställ in säkerhetsattribut korrekt Ställ in attribut som Secure och SameSite för att förhindra attacker mellan webbplatser som XSS och CSRF.
Kodning och avkodning av data Använd encodeURIComponent och decodeURIComponent för att säkert lagra och läsa Cookies-värden så att specialtecken och japanska tecken hanteras korrekt.

Genom att lära sig det korrekta sättet att använda Cookies kan du bygga mer avancerade och säkra webbapplikationer.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Shared Worker i JavaScript

JavaScript och cookies

YouTube Video

JavaScript och cookies

Skapa (skriva) cookies

Skapa cookies med utgångsdatum

Hämta (läsa) cookies

Funktion för att hämta värdet av en cookie

Ta bort cookies

Cookie-alternativ

Exempel: Säker cookie

Kodning och avkodning

Praktiskt exempel: Spara och ladda ett tema

Begränsningar och försiktighetsåtgärder för cookies

Server och Cookies

Sammanfattning

YouTube Video

Server och `Cookies`