Cookie JavaScript
I cookie consentono di memorizzare le informazioni dell'utente nelle pagine web.
Cosa sono i cookie?
I cookie sono dati, memorizzati in piccoli file di testo, sul tuo computer.
Quando un server Web ha inviato una pagina Web a un browser, la connessione viene interrotta e il server dimentica tutto ciò che riguarda l'utente.
I cookie sono stati inventati per risolvere il problema "come ricordare le informazioni sull'utente":
- Quando un utente visita una pagina web, il suo nome può essere memorizzato in un cookie.
- La prossima volta che l'utente visita la pagina, il cookie "ricorda" il suo nome.
I cookie vengono salvati in coppie nome-valore come:
username = John Doe
Quando un browser richiede una pagina Web da un server, alla richiesta vengono aggiunti i cookie appartenenti alla pagina. In questo modo il server ottiene i dati necessari per "ricordare" le informazioni sugli utenti.
Nessuno degli esempi seguenti funzionerà se il tuo browser ha il supporto per i cookie locali disattivato.
Crea un cookie con JavaScript
JavaScript può creare, leggere ed eliminare i cookie con la document.cookie
proprietà.
Con JavaScript si può creare un cookie in questo modo:
document.cookie = "username=John Doe";
Puoi anche aggiungere una data di scadenza (in ora UTC). Per impostazione predefinita, il cookie viene eliminato alla chiusura del browser:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
Con un parametro di percorso, puoi dire al browser a quale percorso appartiene il cookie. Per impostazione predefinita, il cookie appartiene alla pagina corrente.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Leggi un cookie con JavaScript
Con JavaScript, i cookie possono essere letti in questo modo:
let x = document.cookie;
document.cookierestituirà tutti i cookie in una stringa molto simile a: cookie1=valore; cookie2=valore; cookie3=valore;
Modifica un cookie con JavaScript
Con JavaScript, puoi modificare un cookie nello stesso modo in cui lo crei:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Il vecchio cookie viene sovrascritto.
Elimina un cookie con JavaScript
Eliminare un cookie è molto semplice.
Non è necessario specificare un valore del cookie quando elimini un cookie.
Basta impostare il parametro di scadenza su una data passata:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";
Dovresti definire il percorso del cookie per assicurarti di eliminare il cookie corretto.
Alcuni browser non ti consentono di eliminare un cookie se non specifichi il percorso.
La stringa di biscotti
La document.cookieproprietà si presenta come una normale stringa di testo. Ma non è.
Anche se scrivi un'intera stringa di cookie su document.cookie, quando la leggi di nuovo, puoi vederne solo la coppia nome-valore.
Se imposti un nuovo cookie, i cookie più vecchi non vengono sovrascritti. Il nuovo cookie viene aggiunto a document.cookie, quindi se leggi nuovamente document.cookie otterrai qualcosa del tipo:
cookie1 = valore; cookie2 = valore;
Se vuoi trovare il valore di un cookie specificato, devi scrivere una funzione JavaScript che cerchi il valore del cookie nella stringa del cookie.
Esempio di cookie JavaScript
Nell'esempio a seguire, creeremo un cookie che memorizza il nome di un visitatore.
La prima volta che un visitatore arriva alla pagina web, gli verrà chiesto di inserire il proprio nome. Il nome viene quindi memorizzato in un cookie.
La prossima volta che il visitatore arriva alla stessa pagina, riceverà un messaggio di benvenuto.
Per l'esempio creeremo 3 funzioni JavaScript:
- Una funzione per impostare un valore di cookie
- Una funzione per ottenere un valore del cookie
- Una funzione per controllare il valore di un cookie
Una funzione per impostare un cookie
Per prima cosa, creiamo una functionche memorizza il nome del visitatore in una variabile cookie:
Esempio
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Esempio spiegato:
I parametri della funzione di cui sopra sono il nome del cookie (cname), il valore del cookie (cvalue) e il numero di giorni prima della scadenza del cookie (exdays).
La funzione imposta un cookie sommando il nome del cookie, il valore del cookie e la stringa di scadenza.
Una funzione per ottenere un cookie
Quindi, creiamo un functionche restituisce il valore di un cookie specificato:
Esempio
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Funzione spiegata:
Prendi il cookiename come parametro (cname).
Crea una variabile (nome) con il testo da cercare (cname + "=").
Decodifica la stringa del cookie, per gestire i cookie con caratteri speciali, ad esempio '$'
Dividi document.cookie su punto e virgola in un array chiamato ca (ca = decodedCookie.split(';')).
Passa attraverso l'array ca (i = 0; i < ca.length; i++) e leggi ogni valore c = ca[i]).
Se il cookie viene trovato (c.indexOf(name) == 0), restituisce il valore del cookie (c.substring(name.length, c.length).
Se il cookie non viene trovato, restituire "".
Una funzione per controllare un cookie
Infine, creiamo la funzione che controlla se è impostato un cookie.
Se il cookie è impostato, visualizzerà un messaggio di saluto.
Se il cookie non è impostato, visualizzerà una finestra di richiesta, chiedendo il nome dell'utente, e memorizza il cookie username per 365 giorni, richiamando la setCookiefunzione:
Esempio
function checkCookie() {
let
username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}
Adesso tutti insieme
Esempio
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca
= document.cookie.split(';');
for(let i = 0; i < ca.length; i++)
{
let c = ca[i];
while (c.charAt(0) == '
') {
c = c.substring(1);
}
if (c.indexOf(name)
== 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function
checkCookie() {
let user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
}
L'esempio sopra esegue la checkCookie()funzione quando la pagina viene caricata.