JavaScript i pliki cookie

Articles

Ten artykuł wyjaśnia JavaScript i pliki cookie.

Szczegółowo wyjaśnimy wszystko krok po kroku, od podstaw plików cookie, ich odczytywania i zapisywania, bezpieczeństwa, aż po praktyczne przykłady.

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 i pliki cookie

„Cookie” odnosi się do małych fragmentów danych przechowywanych w przeglądarce użytkownika. Są one używane głównie do następujących celów:.

Uwierzytelnianie użytkownika (utrzymanie stanu logowania)
Zapisywanie ustawień użytkownika (język, motyw itp.)
Śledzenie (historia przeglądania itp.)

W JavaScript można odczytywać i zapisywać pliki cookie za pomocą document.cookie.

Tworzenie (zapisywanie) plików cookie

Pliki cookie są tworzone za pomocą następującej składni:.

1document.cookie = "username=JohnDoe";

Ten kod zapisuje w przeglądarce plik cookie o nazwie „username=JohnDoe”.

Tworzenie plików cookie z datą wygaśnięcia

Pliki cookie mogą mieć ustawioną datę wygaśnięcia. Jeśli nie ustawiono daty wygaśnięcia, plik cookie jest traktowany jako plik cookie sesji i zostanie usunięty po zamknięciu przeglądarki.

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

Atrybut expires określa datę wygaśnięcia pliku cookie w formacie UTC.
Atrybut path określa ścieżkę, do której plik cookie będzie wysyłany. / oznacza całą witrynę.
Jeśli określisz SameSite=None, Cookie będzie wysyłane nawet podczas żądań między stronami. Jednak w tym przypadku zawsze musisz dodać atrybut Secure.
Określenie atrybutu Secure ogranicza przesyłanie Cookie tylko do komunikacji HTTPS, zwiększając bezpieczeństwo.
Odnosić się do document.cookie, możesz uzyskać wszystkie dostępne na bieżącej stronie Cookie jako jeden ciąg znaków.
Korzystając z console.log, możesz sprawdzić różnicę między faktycznymi wartościami Cookie ustawionymi w przeglądarce a wartościami, które można pobrać.

Pobieranie (odczytywanie) plików cookie

Wszystkie pliki cookie można pobrać jako ciąg znaków za pomocą 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"

Wartość zwracana przez document.cookie to pojedynczy ciąg, w którym wszystkie Cookie są połączone w formacie 'klucz=wartość;'.
Wygodnie jest użyć funkcji do analizowania tego ciągu i wyodrębnienia żądanej wartości.

Funkcja do pobierania wartości pliku 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"

Ta funkcja dzieli klucze i wartości za pomocą split() i zwraca wartość, jeśli odpowiada określonemu kluczowi.
Korzystając z decodeURIComponent, możesz poprawnie odczytać zakodowane znaki.
Jeśli odpowiedni klucz nie istnieje, zwraca null.

Usuwanie plików cookie

Plik cookie można usunąć, ustawiając jego datę wygaśnięcia na datę w przeszłości.

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"

Przypisując pustą wartość do username i ustawiając datę wygaśnięcia w przeszłości, zostanie ona usunięta.
Podczas usuwania Cookie musisz również dopasować atrybuty path, SameSite i Secure do tych, które były użyte przy tworzeniu.
W tym przykładzie username zostaje usunięte, a inne Cookie, takie jak theme=dark, pozostają.

Opcje plików cookie

Możesz określić różne opcje, aby kontrolować zachowanie pliku cookie. Główne z nich to:.

expires Określa datę wygaśnięcia pliku cookie w formacie UTC. Jeśli nie zostanie określona, plik cookie staje się plikiem sesyjnym i zostaje usunięty po zamknięciu przeglądarki.
max-age Określa datę wygaśnięcia pliku cookie w sekundach. To ustawienie ma pierwszeństwo przed expires.
path Określa ścieżkę, dla której plik cookie będzie wysyłany. Na przykład, jeśli określisz /admin, plik cookie będzie wysyłany tylko do stron znajdujących się pod tą ścieżką.
domain Określa domenę, dla której plik cookie jest ważny. Zazwyczaj jest ustawiana dla bieżącej domeny, ale możesz ją zastosować do wszystkich subdomen, np. .example.com.
secure Gdy ten atrybut jest określony, plik cookie jest wysyłany tylko przez HTTPS. Dla zwiększenia bezpieczeństwa zawsze ustawiaj ten atrybut dla informacji wrażliwych.
SameSite Kontroluje, czy pliki cookie są wysyłane podczas żądań między witrynami. Możesz określić jedną z trzech wartości:.
- Strict Pliki cookie są wysyłane tylko w przypadku żądań z tej samej witryny.
- Lax Pliki cookie są wysyłane podczas normalnej nawigacji, ale z pewnymi ograniczeniami.
- None Pliki cookie mogą być wysyłane nawet przy żądaniach między witrynami. Jednak wymaga to również atrybutu Secure.

Przykład: Bezpieczny plik cookie

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

Jeśli określisz secure, Cookie będzie wysyłane tylko przez połączenie HTTPS.
Jeśli ustawisz SameSite=Strict, Cookie nie będzie wysyłane przy żądaniach między stronami, co skutecznie zapobiega atakom CSRF.
Takie bezpieczne atrybuty są niezbędne dla ważnych Cookie używanych do uwierzytelniania lub zarządzania sesją.

Kodowanie i dekodowanie

Ponieważ wartości plików cookie mogą zawierać znaki specjalne, bezpieczniej jest używać 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"

Korzystając z encodeURIComponent, możesz bezpiecznie przechowywać spacje, symbole itd. w Cookie.
Podczas odczytywania użyj decodeURIComponent, aby przywrócić oryginalny ciąg znaków.
W tym przykładzie max-age=604800 ustawia okres ważności na 7 dni (604 800 sekund). Jest to sposób określania daty wygaśnięcia, podobny do expires. max-age można podać w sekundach i często jest prostszy w użyciu.

Praktyczny przykład: zapisywanie i ładowanie motywu

Poniżej przedstawiono przykład zapisania wybranego przez użytkownika motywu w pliku cookie i automatycznego zastosowania go przy kolejnej wizycie.

 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>

Funkcja setTheme zapisuje wybrany motyw w Cookie i natychmiast wywołuje applyTheme, aby zaktualizować ekran.
Funkcja applyTheme zmienia kolory tła i tekstu elementu body zgodnie z wybranym motywem.
W tym przykładzie, ponieważ ustawiono max-age=604800, wybór motywu jest zachowywany przez tydzień.
Ponieważ wybór użytkownika może zostać zachowany przy ponownym odwiedzeniu strony, poprawia się doświadczenie użytkownika (UX).

Ograniczenia i uwagi dotyczące plików cookie

Należy pamiętać o następujących kwestiach podczas korzystania z plików cookie:.

Ograniczenia rozmiaru Rozmiar pojedynczego pliku cookie jest ograniczony do około 4 KB.
Ograniczenie liczby plików cookie, które można zapisać W zależności od przeglądarki możesz zapisać tylko około 20 do 50 plików cookie na domenę.
Środki ostrożności dotyczące bezpieczeństwa Zawartość plików Cookie jest zasadniczo zapisana w postaci niezaszyfrowanej, więc nie nadaje się do przechowywania poufnych informacji, takich jak hasła.
Pliki cookie niedostępne z poziomu JavaScript Plików cookie z atrybutem HttpOnly nie można odczytać w JavaScript ze względów bezpieczeństwa.

Serwer i pliki `Cookie`

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

Niektóre atrybuty plików Cookie, takie jak HttpOnly, nie mogą być ustawione za pomocą JavaScript. Muszą one być ustawiane po stronie serwera.

Podsumowanie

Manipulowanie plikami Cookie za pomocą JavaScript może poprawić doświadczenie użytkownika i utrzymać stan. Należy jednak pamiętać o poniższych kwestiach, aby przetwarzać je bezpiecznie i odpowiednio.

Zapisuj tylko minimalnie potrzebne informacje Z punktu widzenia prywatności i bezpieczeństwa unikaj przechowywania danych osobowych lub wrażliwych, zapisując tylko niezbędne dane.
Odpowiednio ustaw atrybuty bezpieczeństwa Ustaw atrybuty takie jak Secure i SameSite, aby zapobiegać atakom krzyżowym, takim jak XSS i CSRF.
Kodowanie i dekodowanie danych Użyj encodeURIComponent i decodeURIComponent, aby bezpiecznie zapisywać i odczytywać wartości plików Cookie, umożliwiając poprawną obsługę znaków specjalnych i japońskich.

Ucząc się poprawnego korzystania z plików Cookie, można budować bardziej zaawansowane i bezpieczne aplikacje internetowe.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Współdzielony Worker w JavaScript JavaScript i `Web Storage`

JavaScript i pliki cookie

YouTube Video

JavaScript i pliki cookie

Tworzenie (zapisywanie) plików cookie

Tworzenie plików cookie z datą wygaśnięcia

Pobieranie (odczytywanie) plików cookie

Funkcja do pobierania wartości pliku cookie

Usuwanie plików cookie

Opcje plików cookie

Przykład: Bezpieczny plik cookie

Kodowanie i dekodowanie

Praktyczny przykład: zapisywanie i ładowanie motywu

Ograniczenia i uwagi dotyczące plików cookie

Serwer i pliki Cookie

Podsumowanie

YouTube Video

Serwer i pliki `Cookie`