5.1 Proprietà principali dei cookie
I cookie (cookies) sono piccoli frammenti di dati che i siti web possono salvare sul lato client (nel browser dell'utente). Sono apparsi 20 anni prima del localStorage e per tutto questo tempo hanno aiutato a svolgere le loro funzioni. Anche oggi vengono spesso utilizzati per salvare informazioni sullo stato della sessione, preferenze dell'utente, tracciamento e altri compiti.
Proprietà principali dei cookie:
- Nome e valore (name=value): una coppia chiave-valore che memorizza i dati.
- Dominio e percorso (domain, path): determinano a quali URL e domini sono applicabili i cookie.
- Durata (expires, max-age): definisce quando il cookie scade e viene eliminato.
- Sicurezza (secure, HttpOnly): indica come e quando i cookie possono essere trasmessi.
Impostazione dei cookie
I cookie possono essere impostati con JavaScript o codice server. In JavaScript si utilizza la proprietà document.cookie.
Esempio di impostazione di un cookie con JavaScript:
document.cookie = "username=JohnDoe";
Parametri aggiuntivi dei cookie:
- expires: indica la data di scadenza del cookie. Dopo questa data, il cookie verrà eliminato.
- path: specifica il percorso per cui il cookie è valido. Di solito si usa / per rendere il cookie accessibile a tutto il sito.
- domain: specifica il dominio per cui il cookie è valido.
- secure: se impostato, il cookie sarà trasmesso solo su HTTPS.
- HttpOnly: se impostato, il cookie non può essere accessibile tramite JavaScript (solo dal server).
Esempio di impostazione di un cookie con parametri aggiuntivi:
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
5.2 Gestione dei cookie
1. Lettura dei cookie
Tutti i cookie per il documento corrente sono memorizzati in una lunga stringa in document.cookie. Per ottenere il valore di un cookie, è necessario analizzare questa stringa.
Esempio di lettura di un cookie:
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
// Ottenere il valore del cookie "username"
const username = getCookie('username');
console.log(username); // Restituirà: JohnDoe
2. Aggiornamento dei cookie
Per aggiornare il valore di un cookie, basta impostarlo nuovamente con lo stesso nome, ma con un nuovo valore e parametri.
Esempio di aggiornamento di un cookie:
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
3. Eliminazione dei cookie
Per eliminare un cookie, è necessario impostare per esso una data di scadenza passata.
Esempio di eliminazione di un cookie:
// Impostare una data di scadenza passata
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
5.3 Esempi di lavoro con i cookie
Spiegazione:
setCookie: imposta un cookie con il nome, valore e durata (in giorni) specificatigetCookie: restituisce il valore di un cookie con il nome specificatodeleteCookie: elimina un cookie con il nome specificato
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Esempio di Cookie</title>
</head>
<body>
<button onclick="handleSetCookie()">Imposta Cookie</button>
<button onclick="handleGetCookie()">Ottieni Cookie</button>
<button onclick="handleDeleteCookie()">Elimina Cookie</button>
<script>
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i].trim();
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function deleteCookie(name) {
document.cookie = name + '=; Max-Age=0; path=/';
}
function handleSetCookie() {
setCookie('username', 'JohnDoe', 7);
alert('Il cookie "username" è stato impostato con il valore "JohnDoe" per 7 giorni');
}
function handleGetCookie() {
const cookieValue = getCookie('username');
if (cookieValue) {
alert('Il cookie "username" ha il valore: ' + cookieValue);
} else {
alert('Il cookie "username" non è stato trovato');
}
}
function handleDeleteCookie() {
deleteCookie('username');
alert('Il cookie "username" è stato eliminato');
}
</script>
</body>
</html>
5.4 Impostazione dei cookie lato server
Esaminiamo il lavoro con i cookie HttpOnly e Secure sul server (Node.js).
Esempio:
const express = require('express');
const app = express();
app.get('/setcookie', (req, res) => {
res.cookie('secureServerCookie', 'ServerJohnDoe', {
maxAge: 7 * 24 * 60 * 60 * 1000, // 7 giorni
httpOnly: true,
secure: true,
sameSite: 'strict'
});
res.send('Cookie di sicurezza del server impostato');
});
app.get('/getcookie', (req, res) => {
const cookie = req.cookies.secureServerCookie;
res.send(`Valore del cookie: ${cookie}`);
});
app.listen(3000, () => {
console.log('Server in esecuzione sulla porta 3000');
});
Esempi di utilizzo dei cookie:
- Autenticazione: i cookie sono spesso utilizzati per memorizzare token di sessione che autenticano l'utente tra le richieste.
- Preferenze degli utenti: i cookie possono memorizzare impostazioni dell'utente, come la lingua dell'interfaccia o i temi.
- Tracciamento degli utenti: i cookie possono essere utilizzati per tracciare il comportamento degli utenti sul sito per analisi e personalizzazione del contenuto.
GO TO FULL VERSION