JavaScript e Cookie

Articles

JavaScript e Cookie

Questo articolo spiega JavaScript e i cookie.

Spiegheremo tutto con attenzione passo dopo passo: dalle basi dei cookie, lettura e scrittura, sicurezza, fino a esempi pratici.

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 e Cookie

Cookie si riferisce a piccoli frammenti di dati memorizzati nel browser dell’utente. Sono usati principalmente per i seguenti scopi:.

Autenticazione dell’utente (mantenimento dello stato di accesso)
Salvataggio delle impostazioni dell’utente (lingua, tema, ecc.)
Tracciamento (cronologia di navigazione, ecc.)

In JavaScript, puoi leggere e scrivere i cookie usando document.cookie.

Creazione (scrittura) dei cookie

I cookie sono creati con la seguente sintassi:.

1document.cookie = "username=JohnDoe";

Questo codice salva un cookie chiamato "username=JohnDoe" nel browser.

Creare cookie con una data di scadenza

I cookie possono avere una data di scadenza impostata. Se non viene impostata una data di scadenza, è considerato un cookie di sessione e viene eliminato alla chiusura del browser.

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

L’attributo expires specifica la data di scadenza del cookie in formato UTC.
L’attributo path specifica il percorso dove il cookie verrà inviato. / significa l’intero sito.
Se specifichi SameSite=None, il Cookie verrà inviato anche con richieste cross-site. Tuttavia, in questo caso, devi sempre includere l'attributo Secure.
Specificare Secure limita il Cookie alla sola comunicazione HTTPS, migliorando la sicurezza.
Facendo riferimento a document.cookie, puoi ottenere tutti i Cookie disponibili nella pagina corrente come stringa.
Utilizzando console.log, puoi verificare la differenza tra i valori effettivi dei Cookie impostati nel browser e i valori che possono essere recuperati.

Recuperare (leggere) i cookie

Puoi recuperare tutti i cookie come stringa con 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"

Il valore restituito da document.cookie è una singola stringa in cui tutti i Cookie sono concatenati nel formato 'key=value;'.
È conveniente utilizzare una funzione per analizzare questa stringa ed estrarre il valore desiderato.

Funzione per ottenere il valore di un 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"

Questa funzione divide le chiavi e i valori usando split() e restituisce il valore se corrisponde alla chiave specificata.
Utilizzando decodeURIComponent, puoi recuperare correttamente i caratteri codificati.
Se la chiave corrispondente non esiste, restituisce null.

Eliminare i cookie

Un cookie può essere eliminato impostando la sua data di scadenza a una data passata.

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"

Assegnando un valore vuoto a username e impostando una data di scadenza passata, il cookie verrà eliminato.
Quando elimini un Cookie, devi anche abbinare gli attributi path, SameSite e Secure a quelli utilizzati quando è stato creato.
In questo esempio, username viene eliminato, mentre altri Cookie come theme=dark rimangono.

Opzioni dei cookie

Puoi specificare varie opzioni per controllare il comportamento di un cookie. Le principali sono le seguenti:.

Specifica la data di scadenza del cookie in formato UTC. Se non specificato, il cookie diventa un cookie di sessione e viene eliminato alla chiusura del browser.

Specifica la data di scadenza del cookie in secondi. Questo ha la precedenza su `expires`.

Specifica il percorso per cui il cookie verrà inviato. Ad esempio, se specifichi `/admin`, il cookie verrà inviato solo alle pagine sotto quel percorso.

Specifica il dominio per cui il cookie è valido. Di solito è impostato per il dominio attuale, ma puoi applicarlo a tutti i sottodomini, come `.example.com`.

Quando questo attributo è specificato, il cookie viene inviato solo tramite HTTPS. Per maggiore sicurezza, imposta sempre questo attributo per informazioni sensibili.

Controlla se i cookie vengono inviati su richieste cross-site. Puoi specificare uno dei seguenti tre valori:.

- `Strict`
    I cookie vengono inviati solo per richieste dallo stesso sito.

- `Lax`
    I cookie vengono inviati per la navigazione regolare, ma con alcune limitazioni.

- `None`
    I cookie possono essere inviati anche per richieste cross-site. Tuttavia, è necessario anche l’attributo `Secure`.

Esempio: cookie sicuro

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

Se specifichi secure, il Cookie verrà inviato solo tramite comunicazioni HTTPS.
Se specifichi SameSite=Strict, il Cookie non verrà inviato per richieste cross-site, rendendolo efficace come contromisura CSRF.
Tali attributi di sicurezza sono essenziali per i Cookie importanti utilizzati per l'autenticazione o la gestione della sessione.

Codifica e decodifica

Poiché i valori dei cookie possono contenere caratteri speciali, è più sicuro usare 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"

Utilizzando encodeURIComponent, puoi memorizzare in modo sicuro spazi, simboli, ecc. in un Cookie.
Durante la lettura, usa decodeURIComponent per ripristinare la stringa originale.
In questo esempio, viene utilizzato max-age=604800 per impostare il periodo di scadenza a 7 giorni (604.800 secondi). Questo è un metodo per specificare la data di scadenza, simile a expires. max-age può essere specificato in secondi ed è spesso più facile da usare.

Esempio pratico: salvataggio e caricamento di un tema

Di seguito un esempio di salvataggio del tema selezionato dall’utente in un cookie e di applicazione automatica alla visita successiva.

 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>

La funzione setTheme salva il tema selezionato in un Cookie e richiama immediatamente applyTheme per aggiornare lo schermo.
La funzione applyTheme cambia i colori di sfondo e testo del body in base al tema.
In questo esempio, poiché è impostato max-age=604800, l'impostazione del tema viene conservata per una settimana.
Poiché la selezione dell'utente può essere mantenuta durante la visita successiva alla pagina, l'esperienza utente (UX) è migliorata.

Limitazioni e precauzioni dei cookie

Presta attenzione ai seguenti punti quando usi i cookie:.

Limitazioni di dimensione La dimensione di un singolo cookie è limitata a circa 4KB.
Limite sul numero di cookie che possono essere salvati A seconda del browser, puoi salvare solo circa 20-50 per dominio.
Precauzioni di sicurezza Il contenuto dei Cookie viene generalmente salvato in testo semplice, quindi non è adatto alla memorizzazione di informazioni riservate come le password.
Cookie inaccessibili da JavaScript I Cookie con attributo HttpOnly non possono essere letti da JavaScript per motivi di sicurezza.

Server e `Cookie`

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

Alcuni attributi dei Cookie, come HttpOnly, non possono essere impostati tramite JavaScript. Questi devono essere impostati lato server.

Riepilogo

Manipolare i Cookie con JavaScript può migliorare l'esperienza utente e mantenere lo stato. Tuttavia, tieni presente i seguenti punti per gestirli in modo sicuro e appropriato.

Conserva solo le informazioni strettamente necessarie Dal punto di vista della privacy e della sicurezza, evita di memorizzare informazioni personali o sensibili e registra solo i dati necessari.
Imposta correttamente gli attributi di sicurezza Imposta attributi come Secure e SameSite per prevenire attacchi cross-site come XSS e CSRF.
Codifica e decodifica dei dati Utilizza encodeURIComponent e decodeURIComponent per memorizzare e leggere in modo sicuro i valori dei Cookie affinché i caratteri speciali e il giapponese vengano gestiti correttamente.

Imparando il modo corretto di utilizzare i Cookie, puoi realizzare applicazioni web più avanzate e sicure.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Shared Worker in JavaScript

JavaScript e Cookie

YouTube Video

JavaScript e Cookie

Creazione (scrittura) dei cookie

Creare cookie con una data di scadenza

Recuperare (leggere) i cookie

Funzione per ottenere il valore di un cookie

Eliminare i cookie

Opzioni dei cookie

Esempio: cookie sicuro

Codifica e decodifica

Esempio pratico: salvataggio e caricamento di un tema

Limitazioni e precauzioni dei cookie

Server e Cookie

Riepilogo

YouTube Video

Server e `Cookie`