Cookies JavaScript
- Pagina precedente JS Timing
- Pagina successiva Introduzione agli API Web
I cookie permettono di memorizzare informazioni dell'utente nelle pagine web.
Cos'è un cookie?
I cookie sono dati memorizzati in piccoli file di testo sul computer.
Dopo che il server web ha inviato una pagina al browser, la connessione viene chiusa e il server dimentica tutto dell'utente.
I cookie sono stati inventati per risolvere il problema di come ricordare le informazioni dell'utente:
- Quando l'utente visita una pagina web, il suo nome può essere memorizzato nei cookie.
- Quando l'utente visita la pagina successivamente, il cookie "ricorderà" il suo nome.
I cookie vengono salvati in coppie di nome-valore, come ad esempio:
username = Bill Gates
Quando il browser richiede una pagina al server, i cookie appartenenti a quella pagina vengono aggiunti alla richiesta. In questo modo il server ottiene i dati necessari per "ricordare" le informazioni dell'utente.
Se il browser ha disabilitato il supporto locale per i cookie, gli esempi seguenti non funzioneranno.
Creazione dei cookie tramite JavaScript
JavaScript può essere utilizzato document.cookie Creazione, lettura e cancellazione dei cookie delle proprietà.
Attraverso JavaScript, è possibile creare i cookie in questo modo:
document.cookie = "username=Bill Gates";
È possibile aggiungere anche una data valida (ora UTC). Di default, i cookie vengono cancellati quando il browser viene chiuso:
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";
Attraverso path I parametri, ti permettono di dire al browser a quale percorso appartiene il cookie. Di default, il cookie appartiene alla pagina corrente.
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
Leggere un cookie tramite JavaScript
Puoi leggere un cookie in questo modo tramite JavaScript:
var x = document.cookie;
document.cookie Restituirà tutti i cookie in una stringa, ad esempio: cookie1=value; cookie2=value; cookie3=value;
Modificare un cookie tramite JavaScript
Puoi cambiarlo nello stesso modo in cui lo hai creato utilizzando JavaScript:
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
Il vecchio cookie viene sovrascritto.
Eliminare un cookie tramite JavaScript
Eliminare un cookie è molto semplice.
Non è necessario specificare il valore del cookie quando si elimina un cookie:
Elimina direttamente expires Imposta i parametri 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 permetteranno di eliminare un cookie se non specifici il percorso.
Stringa Cookie
document.cookie L'attributo sembra una stringa di testo normale. Ma non lo è.
Anche se hai impostato document.cookie Scrivi una stringa cookie completa, quando la leggi di nuovo, vedrai solo il nome-valore.
Se viene impostato un nuovo cookie, l'antico cookie non verrà sovrascritto. Il nuovo Cookie verrà aggiunto a document.cookie, quindi se leggi document.cookie, ottieni qualcosa del genere:
cookie1 = value; cookie2 = value;
Se vuoi trovare il valore di un cookie specifico, devi scrivere una funzione JavaScript per cercare il valore del cookie nella stringa del cookie.
Esempio di JavaScript Cookie
Nell'esempio seguente, creeremo un cookie per memorizzare il nome dell'visitatore.
Quando un visitatore arriva per la prima volta sulla pagina web, gli viene richiesto di inserire il nome. Successivamente, questo nome viene memorizzato nel cookie.
Quando il visitatore torna alla stessa pagina, riceverà un messaggio di benvenuto.
Ad esempio, creeremo 3 funzioni JavaScript:
- Funzione per impostare il valore del cookie
- Funzione per ottenere il valore del cookie
- Funzione per controllare il valore del cookie
Funzione per impostare il cookie
Prima di tutto, creiamo una funzione per memorizzare il nome dell'visitatore in una variabile di cookie:
Esempio
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Spiegazione dell'esempio:
I parametri di questa funzione sono: il nome del cookie (cname), il valore del cookie (cvalue) e il numero di giorni conosciuti per la scadenza del cookie (exdays).
Aggiungendo il nome del cookie, il valore del cookie e la stringa di scadenza, la funzione imposta il cookie.
Funzione per ottenere il cookie
Poi, creiamo una funzione che restituisce il valore del cookie specificato:
Esempio
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Spiegazione della funzione:
Passa il cookie come parametro (cname).
Crea una variabile (name) e il testo da cercare (CNAME”=”).
Decodifica la stringa di cookie, gestisci i cookie con caratteri speciali, ad esempio “$”.
Dividere document.cookie con il punto e virgola in un array chiamato ca (decodedCookie.split(';')).
Eseguire un ciclo sulla matrice ca (i = 0; i < ca.length; i++) e leggere ogni valore c = ca[i].
Se viene trovato il cookie (c.indexOf(name) == 0), viene restituito il valore del cookie (c.substring(name.length, c.length)).
Se non viene trovato il cookie, viene restituito "".
Funzione di rilevamento cookie
Infine, creiamo una funzione per controllare se il cookie è impostato.
Se è stato impostato il cookie, viene visualizzato un saluto.
Se il cookie non è impostato, viene visualizzata una finestra di dialogo che chiede il nome dell'utente e memorizza il nome utente come cookie per 365 giorni chiamando setCookie Funzione:
Esempio
funzione checkCookie() {
var username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
}
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
Ora combiniamoli
Esempio
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var 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 checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Benvenuto di nuovo " + user);
}
user = prompt("Inserisci il tuo nome:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
L'esempio sopra verrà eseguito dopo il caricamento della pagina checkCookie().
- Pagina precedente JS Timing
- Pagina successiva Introduzione agli API Web
