Cookies consentono di memorizzare le informazioni utente in pagine web.
Quali sono Cookies ?
Cookies sono dati, memorizzati in piccoli file di testo, sul computer.
Quando un web server ha inviato una pagina web a un browser, il collegamento è spento, e il server dimentica tutto ciò che riguarda l'utente.
Cookies 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 una richiesta del browser una pagina web da un server, cookies appartenenti alla pagina viene aggiunto alla richiesta. In questo modo il server riceve i dati necessari per "ricordare" informazioni sugli utenti.
Creare a Cookie con JavaScript
JavaScript in grado di creare, leggere e cancellare i cookies con il document.cookie proprietà.
Con JavaScript, a cookie può essere creato in questo modo:
document.cookie = "username=John Doe";È inoltre possibile aggiungere una data di scadenza (in tempo UTC). Per impostazione predefinita, the cookie viene eliminato quando il browser viene chiuso:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";Con un parametro di percorso, si può dire al browser quale percorso the cookie appartiene. Per impostazione predefinita, the cookie appartiene alla pagina corrente.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";Leggere a Cookie con JavaScript
Con JavaScript, cookies possono essere letti in questo modo:
var x = document.cookie;document.cookie restituirà tutti cookies in una stringa molto simile: cookie1=value; cookie2=value; cookie3=value; cookie1=value; cookie2=value; cookie3=value;
Modificare a Cookie con JavaScript
Con JavaScript, è possibile modificare a cookie stesso modo in cui lo si crea:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Il vecchio cookie viene sovrascritto.
Eliminazione di a Cookie con JavaScript
L'eliminazione di a cookie è molto semplice. Basta impostare il parametro scade ad una data passata:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC";
Si noti che non è necessario specificare a cookie valore quando si elimina a cookie .
Il Cookie String
La document.cookie proprietà si presenta come una stringa di testo normale. Ma non è.
Anche se si scrive un intero cookie stringa document.cookie , quando si legge di nuovo, si può vedere solo la coppia nome-valore.
Se si imposta un nuovo cookie , anziani cookies non vengono sovrascritti. Il nuovo cookie viene aggiunto a document.cookie , quindi se avete letto document.cookie di nuovo si otterrà qualcosa di simile a:
cookie1 = value; cookie2 = value;
Se si desidera trovare il valore di un determinato cookie , è necessario scrivere una funzione JavaScript che cerca il cookie valore nel cookie stringa.
JavaScript Cookie Esempio
Nel esempio da seguire, creeremo a cookie che memorizza il nome di un visitatore.
La prima volta che un visitatore arriva alla pagina web, gli sarà chiesto di compilare il suo nome. Il nome viene memorizzato in a cookie .
La prossima volta che il visitatore arriva alla stessa pagina, si otterrà un messaggio di benvenuto.
Per l'esempio creeremo 3 funzioni JavaScript:
- Una funzione per impostare un cookie valore
- Una funzione per ottenere un cookie valore
- Una funzione per controllare un cookie valore
Una funzione per impostare a Cookie
In primo luogo, creiamo una funzione che memorizza il nome del visitatore in a cookie variabile:
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;
}
Esempio spiegato:
I parametri della funzione sopra sono il nome del cookie (cname) , il valore del the cookie (cvalue) , e il numero di giorni fino cookie scade (exdays).
La funzione imposta a cookie sommando il cookiename , the cookie valore e la scadenza stringa.
Una funzione per ottenere a Cookie
Poi, creiamo una funzione che restituisce il valore di un determinato cookie :
Esempio
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 spiegato:
Prendere the cookiename come parametro (CNAME).
Creare una variabile (nome) con il testo da ricercare (cname + "=").
Split document.cookie su un punto e virgola in un array chiamato ca (ca = document.cookie.split(';')) .
Loop attraverso il ca array (i=0;i<ca.length;i++) , e leggere ogni valore c=ca[i]) .
Se the cookie viene trovato (c.indexOf(name) == 0) , restituire il valore del the cookie (c.substring(name.length,c.length) .
Se the cookie non viene trovato, tornare "".
Una funzione per controllare a Cookie
Ultimo, creiamo la funzione che checks se a cookie è impostato.
Se the cookie è impostato verrà visualizzato un messaggio di saluto.
Se the cookie non è impostato, verrà visualizzato una finestra di messaggio, che chiede per il nome dell'utente, e memorizza il nome utente cookie per 365 giorni, chiamando la setCookie funzione di:
Esempio
function checkCookie() {
var
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) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
"; " + expires;
}
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 "";
}
function
checkCookie() {
var user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
} Prova tu stesso " L'esempio precedente gestisce il checkCookie() funzione quando la pagina viene caricata.