JavaScript og informasjonskapsler

Articles

Denne artikkelen forklarer JavaScript og informasjonskapsler.

Vi vil nøye forklare alt steg for steg, fra det grunnleggende om informasjonskapsler, lesing og skriving, sikkerhet, 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 informasjonskapsler

Informasjonskapsel refererer til små datastykker lagret i brukerens nettleser. De brukes hovedsakelig til følgende formål:.

Brukergodkjenning (opprettholde innloggingsstatus)
Lagre brukerinnstillinger (språk, tema, etc.)
Sporing (nettleserhistorikk, etc.)

I JavaScript kan du lese og skrive informasjonskapsler ved å bruke document.cookie.

Opprette (skrive) informasjonskapsler

Informasjonskapsler opprettes med følgende syntaks:.

1document.cookie = "username=JohnDoe";

Denne koden lagrer en informasjonskapsel kalt "username=JohnDoe" i nettleseren.

Opprette informasjonskapsler med utløpsdato

Informasjonskapsler kan ha en angitt utløpsdato. Hvis ingen utløpsdato er satt, behandles det som en øktinformasjonskapsel og slettes når nettleseren 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}`);

Attributtet expires angir informasjonskapselens utløpsdato i UTC-format.
Attributtet path angir stien der informasjonskapselen vil bli sendt. / betyr hele nettstedet.
Hvis du angir SameSite=None, vil Cookieen bli sendt selv ved forespørsler på tvers av nettsteder. Men i dette tilfellet må du alltid inkludere Secure-attributtet.
Å angi Secure begrenser Cookieen til kun HTTPS-kommunikasjon, noe som øker sikkerheten.
Ved å referere til document.cookie, kan du hente ut alle Cookieene som er tilgjengelige på siden som en streng.
Ved å bruke console.log, kan du kontrollere forskjellen mellom de faktiske Cookie-verdiene som er satt i nettleseren og de verdiene som kan hentes ut.

Hente (lese) informasjonskapsler

Du kan hente alle informasjonskapsler 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"

Returverdien til document.cookie er en enkelt streng der alle Cookieene settes sammen i formatet 'key=value;'.
Det er praktisk å bruke en funksjon for å analysere denne strengen og hente ut ønsket verdi.

Funksjon for å hente verdien til en informasjonskapsel

 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 funksjonen deler opp nøkler og verdier ved hjelp av split() og returnerer verdien hvis den samsvarer med den angitte nøkkelen.
Ved å bruke decodeURIComponent, kan du hente ut kodede tegn på riktig måte.
Hvis den tilsvarende nøkkelen ikke finnes, returneres null.

Slette informasjonskapsler

En informasjonskapsel kan slettes ved å sette dens utløpsdato 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 å tildele en tom verdi til username og sette utløpsdatoen til tidligere, vil den slettes.
Når du sletter en Cookie, må du også matche path, SameSite og Secure-attributtene med de som ble brukt da den ble opprettet.
I dette eksempelet slettes username, mens andre Cookieer som theme=dark forblir.

Alternativer for informasjonskapsler

Du kan angi ulike alternativer for å kontrollere oppførselen til en informasjonskapsel. De viktigste er som følger:.

Angir informasjonskapselens utløpsdato i UTC-format. Hvis ikke angitt, blir informasjonskapselen en øktinformasjonskapsel og slettes når nettleseren lukkes.

Angir informasjonskapselens utløpsdato i sekunder. Dette har forrang over `expires`.

Angir stien hvor informasjonskapselen vil bli sendt. For eksempel, hvis du angir `/admin`, vil informasjonskapselen kun bli sendt til sider under denne stien.

Angir domenet hvor informasjonskapselen er gyldig. Vanligvis er det satt for det nåværende domenet, men du kan bruke det for alle underdomener, for eksempel `.example.com`.

Når dette attributtet er angitt, sendes informasjonskapselen kun via HTTPS. For økt sikkerhet, bør du alltid angi dette attributtet for sensitiv informasjon.

Kontrollerer om informasjonskapsler sendes ved forespørsler mellom nettsteder. Du kan angi en av følgende tre verdier:.

- `Strict`
    Informasjonskapsler sendes kun ved forespørsler fra samme nettsted.

- `Lax`
    Informasjonskapsler sendes ved vanlig navigering, men med noen begrensninger.

- `None`
    Informasjonskapsler kan sendes selv ved forespørsler mellom nettsteder. Imidlertid kreves også attributtet `Secure`.

Eksempel: Sikker informasjonskapsel

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

Hvis du angir secure, vil Cookieen kun bli sendt over HTTPS-kommunikasjon.
Hvis du angir SameSite=Strict, vil Cookieen ikke bli sendt ved forespørsler på tvers av nettsteder, noe som gjør det effektivt som mottiltak mot CSRF.
Slike sikre attributter er essensielle for viktige Cookieer brukt til autentisering eller sesjonshåndtering.

Koding og dekoding

Siden informasjonskapselverdier kan inneholde spesialtegn, er det tryggere å bruke 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"

Ved å bruke encodeURIComponent, kan du trygt lagre mellomrom, symboler osv. i en Cookie.
Når du leser den ut, bruk decodeURIComponent for å returnere den opprinnelige strengen.
I dette eksempelet brukes max-age=604800 for å sette utløpstiden til 7 dager (604 800 sekunder). Dette er en metode for å angi utløpsdato, liknende expires. max-age kan angis i sekunder og er ofte enklere å bruke.

Praktisk eksempel: Lagre og laste et tema

Følgende er et eksempel på å lagre brukerens valgte tema i en informasjonskapsel og automatisk bruke det ved neste 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>

Funksjonen setTheme lagrer det valgte temaet i en Cookie og kaller umiddelbart applyTheme for å oppdatere skjermen.
Funksjonen applyTheme bytter bakgrunns- og tekstfarger til body i henhold til temaet.
I dette eksempelet, siden max-age=604800 er satt, beholdes temainnstillingen i én uke.
Siden brukerens valg kan beholdes ved gjenbesøk av siden, forbedres brukeropplevelsen (UX).

Begrensninger og forsiktighetsregler for informasjonskapsler

Vær oppmerksom på følgende punkter når du bruker informasjonskapsler:.

Størrelsesbegrensninger Størrelsen på en enkelt informasjonskapsel er begrenset til omtrent 4KB.
Begrensning på antall informasjonskapsler som kan lagres Avhengig av nettleseren, kan du bare lagre omtrent 20 til 50 per domene.
Sikkerhetsforanstaltninger Innholdet i Cookies lagres i utgangspunktet i klartekst, så det egner seg ikke til å lagre konfidensiell informasjon som passord.
Cookies utilgjengelige fra JavaScript Cookies med HttpOnly-attributtet kan ikke leses fra JavaScript av sikkerhetsgrunner.

Server og `Cookies`

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

Noen Cookie-attributter, som HttpOnly, kan ikke settes via JavaScript. Disse må settes på serversiden.

Sammendrag

Manipulering av Cookies med JavaScript kan forbedre brukeropplevelsen og opprettholde tilstand. Vennligst husk følgende punkter for å håndtere dem trygt og korrekt.

Lagre bare den nødvendige minimumsinformasjonen Fra et personvern- og sikkerhetsperspektiv bør man unngå å lagre personlig eller sensitiv informasjon og kun lagre de nødvendige dataene.
Sett sikkerhetsattributter riktig Sett attributter som Secure og SameSite for å motvirke angrep på tvers av nettsteder, som XSS og CSRF.
Koding og dekoding av data Bruk encodeURIComponent og decodeURIComponent for å trygt lagre og lese Cookie-verdier slik at spesialtegn og japansk håndteres korrekt.

Ved å lære korrekt bruk av Cookies kan du bygge mer avanserte og sikre nettapplikasjoner.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Delt Worker i JavaScript

JavaScript og informasjonskapsler

YouTube Video

JavaScript og informasjonskapsler

Opprette (skrive) informasjonskapsler

Opprette informasjonskapsler med utløpsdato

Hente (lese) informasjonskapsler

Funksjon for å hente verdien til en informasjonskapsel

Slette informasjonskapsler

Alternativer for informasjonskapsler

Eksempel: Sikker informasjonskapsel

Koding og dekoding

Praktisk eksempel: Lagre og laste et tema

Begrensninger og forsiktighetsregler for informasjonskapsler

Server og Cookies

Sammendrag

YouTube Video

Server og `Cookies`