JavaScript Cookies
- Forrige side JS Timing
- Næste side Web API introduktion
Cookies lader dig gemme brugerinformationer på websider.
Hvad er en cookie?
Cookies er data, der lagres i små tekstfiler på din computer.
Når webserveren sender en side til browseren og forbindelsen lukkes, glemmer serveren alt om brugeren.
Cookies blev opfundet for at løse problemet med "hvordan man husker brugerens informationer".
- Når brugeren besøger en webside, kan hans navn gemmes i cookie.
- Når brugeren besøger siden igen, vil cookien "huske" hans navn.
Cookies gemmes i navne-værdipar, såsom:
username = Bill Gates
Når browseren anmoder om en side fra serveren, tilføjes cookien til anmodningen. På den måde får serveren nødvendige data til at "huske" brugerens informationer.
Hvis browseren ikke understøtter lokale cookie, vil ingen af de følgende eksempler fungere.
Opret cookie med JavaScript
JavaScript kan bruges til document.cookie Egenskaber til oprettelse, læsning og sletning af cookie.
Med JavaScript kan du oprette cookie på denne måde:
document.cookie = "username=Bill Gates";
Du kan også tilføje en gyldig dato (UTC-tid). Som standard slettes cookien, når browseren lukkes:
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";
Ved sti Parameter, du kan fortælle browseren, hvilken sti cookie tilhører. Som standard tilhører cookie den aktuelle side.
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
Læs cookie via JavaScript
Læs cookie via JavaScript på denne måde:
var x = document.cookie;
document.cookie Returnerer alle cookie i en streng, f.eks.: cookie1=value; cookie2=value; cookie3=value;
Ændr cookie via JavaScript
Ved at bruge JavaScript kan du ændre cookie på samme måde, som du opretter den:
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
Den gamle cookie bliver overskrevet.
Slet cookie via JavaScript
Det er meget simpelt at slette cookie.
Du behøver ikke at specificere cookie-værdien, når du sletter cookie.
Fjern cookie-værdien direkte: expires Indstil parametrene til en dato i fortiden:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
Du bør definere cookie-stien for at sikre, at du sletter den korrekte cookie.
Nogle browsere lader dig ikke slette cookie, hvis du ikke angiver stien.
Cookie-streng
document.cookie Egenskaberne ser ud som en normal tekststreng. Men det er det ikke.
Selvom du sender document.cookie Skriv en fuld cookie-streng, når du læser den igen, kan du kun se navne-værdiparret.
Hvis der sættes en ny cookie, vil den gamle cookie ikke blive overskrevet. Den nye Cookie vil blive tilføjet til document.cookie, så hvis du læser document.cookie, får du noget i denne stil:
cookie1 = value; cookie2 = value;
Hvis du vil finde værdien af en specifik cookie, skal du skrive en JavaScript-funktion til at søge efter cookie-værdien i cookie-strengen.
JavaScript Cookie Eksempel
I nedenstående eksempel opretter vi en cookie til at gemme besøgerens navn.
Når en besøger første gang kommer til websiden, vil han blive bedt om at udfylde sit navn. Derefter gemmes dette navn i cookie.
Når den næste besøger kommer til den samme side, vil han modtage en velkomstbesked.
For eksempel vil vi oprette 3 JavaScript-funktioner:
- Funktion til at sætte cookie-værdi
- Funktion til at hente cookie-værdi
- Funktion til at tjekke cookie-værdi
Funktion til at sætte cookie
Først opretter vi en funktion, der gemmer besøgerens navn i cookie-variablen:
eksempel
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=/";
}
Eksempel forklaring:
Parameterne for denne funktion er: cookie-navnet (cname), cookie-værdien (cvalue) og antallet af dage, cookie udløber (exdays).
Funktionen sætter cookie ved at tilføje cookie-navnet, cookie-værdien og udløbsdatoen.
Funktion til at hente cookie
Dernæst, opretter vi en funktion, der returnerer værdien af den specificerede cookie:
eksempel
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 "";
}
Funktion forklaring:
Brug cookie som parameter (cname).
Opret variablen (name) og den tekst, der skal søges efter (CNAME”=”).
Decodér cookie streng, håndter cookie med specialtegn, f.eks. “$”.
delt med semikolon og del document.cookie til en array kaldet ca (decodedCookie.split(';')).
gennemløb ca-arrayet (i = 0; i < ca.length; i++) og læs derefter hver værdi c = ca[i].
hvis cookie findes (c.indexOf(name) == 0), returneres værdien af cookie (c.substring(name.length, c.length)).
hvis cookie ikke findes, returneres "".
cookie-detecteringsfunktion
til sidst opretter vi en funktion til at kontrollere, om cookie er sat.
hvis cookie allerede er sat, vises der en velkomst.
hvis cookie ikke er sat, vises der en dialogboks og spørger brugeren efter navn, og gemmer brugernavnet som cookie i 365 dage ved at kalde setCookie funktion:
eksempel
function 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);
}
}
}
noe kombineret
eksempel
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 "";
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Velkommen igen " + user);
}
user = prompt("Indtast venligst dit navn:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
De ovenstående eksempler vil køre checkCookie() funktionen efter at siden er blevet indlæst.
- Forrige side JS Timing
- Næste side Web API introduktion
