JavaScript -cookies
Met cookies kunt u gebruikersinformatie op webpagina's opslaan.
Wat zijn cookies?
Cookies zijn gegevens die in kleine tekstbestanden op uw computer worden opgeslagen.
Wanneer een webserver een webpagina naar een browser heeft gestuurd, wordt de verbinding verbroken en vergeet de server alles over de gebruiker.
Cookies zijn uitgevonden om het probleem "hoe informatie over de gebruiker te onthouden" op te lossen:
- Wanneer een gebruiker een webpagina bezoekt, kan zijn/haar naam worden opgeslagen in een cookie.
- De volgende keer dat de gebruiker de pagina bezoekt, "onthoudt" de cookie zijn/haar naam.
Cookies worden opgeslagen in naam-waardeparen zoals:
username = John Doe
Wanneer een browser een webpagina opvraagt bij een server, worden cookies die bij de pagina horen, aan de aanvraag toegevoegd. Op deze manier krijgt de server de nodige gegevens om informatie over gebruikers te "onthouden".
Geen van de onderstaande voorbeelden zal werken als uw browser ondersteuning voor lokale cookies heeft uitgeschakeld.
Een cookie maken met JavaScript
JavaScript kan cookies maken, lezen en verwijderen met de document.cookie
eigenschap.
Met JavaScript kan een cookie als volgt worden aangemaakt:
document.cookie = "username=John Doe";
U kunt ook een vervaldatum toevoegen (in UTC-tijd). Standaard wordt de cookie verwijderd wanneer de browser wordt gesloten:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
Met een padparameter kunt u de browser vertellen tot welk pad de cookie behoort. Standaard hoort de cookie bij de huidige pagina.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Een cookie lezen met JavaScript
Met JavaScript kunnen cookies als volgt worden gelezen:
let x = document.cookie;
document.cookiezal alle cookies in één string teruggeven, ongeveer zoals: cookie1=value; cookie2=waarde; cookie3=waarde;
Een cookie wijzigen met JavaScript
Met JavaScript kunt u een cookie op dezelfde manier wijzigen als u het aanmaakt:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
De oude cookie wordt overschreven.
Een cookie verwijderen met JavaScript
Het verwijderen van een cookie is heel eenvoudig.
U hoeft geen cookiewaarde op te geven wanneer u een cookie verwijdert.
Stel de parameter Verloopt gewoon in op een datum in het verleden:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";
U moet het cookiepad definiëren om ervoor te zorgen dat u de juiste cookie verwijdert.
In sommige browsers kunt u geen cookie verwijderen als u het pad niet opgeeft.
De Cookie String
De document.cookieeigenschap ziet eruit als een normale tekenreeks. Maar het is niet.
Zelfs als u een hele cookiereeks naar document.cookie schrijft, kunt u bij het opnieuw uitlezen alleen het naam-waardepaar ervan zien.
Als u een nieuwe cookie instelt, worden oudere cookies niet overschreven. De nieuwe cookie wordt toegevoegd aan document.cookie, dus als je document.cookie opnieuw leest, krijg je zoiets als:
cookie1 = waarde; cookie2 = waarde;
Als u de waarde van een opgegeven cookie wilt vinden, moet u een JavaScript-functie schrijven die zoekt naar de cookiewaarde in de cookiereeks.
JavaScript-cookievoorbeeld
In het volgende voorbeeld zullen we een cookie aanmaken die de naam van een bezoeker opslaat.
De eerste keer dat een bezoeker op de webpagina komt, wordt hem/haar gevraagd zijn/haar naam in te vullen. De naam wordt dan opgeslagen in een cookie.
De volgende keer dat de bezoeker op dezelfde pagina komt, krijgt hij/zij een welkomstbericht.
Voor het voorbeeld zullen we 3 JavaScript-functies maken:
- Een functie om een cookiewaarde in te stellen
- Een functie om een cookiewaarde te krijgen
- Een functie om een cookiewaarde te controleren
Een functie om een cookie in te stellen
Eerst maken we een functiondie de naam van de bezoeker opslaat in een cookievariabele:
Voorbeeld
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=/";
}
Voorbeeld uitgelegd:
De parameters van de bovenstaande functie zijn de naam van de cookie (cname), de waarde van de cookie (cvalu), en het aantal dagen tot de cookie zou moeten verlopen (exdays).
De functie stelt een cookie in door de cookienaam, de cookiewaarde en de expires-reeks bij elkaar op te tellen.
Een functie om een cookie te krijgen
Vervolgens maken we een functiondie de waarde van een opgegeven cookie retourneert:
Voorbeeld
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 "";
}
Functie uitgelegd:
Neem de cookienaam als parameter (cname).
Maak een variabele (naam) met de tekst waarnaar moet worden gezocht (cname + "=").
Decodeer de cookiestring om cookies met speciale tekens te verwerken, bijv. '$'
Splits document.cookie op puntkomma's in een array met de naam ca (ca = decodedCookie.split(';')).
Loop door de ca-array (i = 0; i < ca.length; i++), en lees elke waarde uit c = ca[i]).
Als de cookie wordt gevonden (c.indexOf(name) == 0), retourneer dan de waarde van de cookie (c.substring(name.length, c.length).
Als de cookie niet wordt gevonden, retourneert u "".
Een functie om een cookie te controleren
Als laatste creëren we de functie die controleert of er een cookie is geplaatst.
Als de cookie is ingesteld, wordt er een begroeting weergegeven.
Als de cookie niet is ingesteld, wordt er een promptvenster weergegeven waarin om de naam van de gebruiker wordt gevraagd en wordt de gebruikersnaam-cookie 365 dagen bewaard door de setCookiefunctie aan te roepen:
Voorbeeld
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);
}
}
}
Allemaal samen nu
Voorbeeld
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);
}
}
}
Het bovenstaande voorbeeld voert de checkCookie()functie uit wanneer de pagina wordt geladen.