Introductie tot cookies: JavaScript-cookies begrijpen en ermee werken

Preslav Dobrev2022-10-25 · 8 min read

Introductie tot cookies: JavaScript-cookies begrijpen en ermee werken

Browsercookies, of HTTP-cookies, zijn tekstbestanden die bestaan uit kleine stukjes data. Websites gebruiken deze informatie om de reis van een gebruiker te volgen, waardoor ze op maat gemaakte functies kunnen aanbieden en hun browse-ervaring kunnen verbeteren. Cookies kunnen tot 4096 bytes aan data opslaan. We kunnen echter een beperkt aantal cookies per domein toevoegen, afhankelijk van de browser.

Een basisbegrip van HTTP-cookies is essentieel voor elke internetgebruiker, of je nu gewoon voor je plezier surft of er je brood mee verdient. Deze gids zal je in detail kennis laten maken met cookies en hun verschillende soorten. Onze focus is om je te helpen JavaScript-cookies te begrijpen en ermee te werken.

Laten we beginnen!

Vereisten

Om deze handleiding te volgen, moet je beschikken over:

Een basisbegrip van JavaScript.

Aan de slag met JavaScript-cookies

Werken met JavaScript-cookies is eenvoudig. Het maakt het mogelijk om moeiteloos cookies aan te maken, te bewerken en op te halen. Daarnaast kunnen we de cookie-eigenschap van het Document-object gebruiken om cookie-eigenschappen zoals naam, waarde en lengte te manipuleren en te beperken, om er maar een paar te noemen.

Typen cookies

Laten we eerst eens kijken naar de verschillende soorten cookies:

First-party cookies

Deze cookies worden aangemaakt en opgeslagen telkens wanneer een gebruiker een website bezoekt. Hiermee kunnen website-eigenaren gedetailleerd inzicht krijgen in de gegevens van gebruikers en hen een betere browse-ervaring bieden.

Permanente cookies

Voor dit type cookie wijst de uitgever een vervaldatum toe. Daarom wordt het voor een veel langere periode gebruikt. Dit betekent dat zelfs als je je browser sluit, de cookie erop blijft staan. Ook worden de gegevens telkens wanneer je de website bezoekt die de cookie heeft aangemaakt, teruggestuurd naar de uitgever.

Sessiecookies

Deze cookies zijn slechts tijdelijk en worden opgeslagen in het geheugen van je browser zolang deze geopend is. Wanneer je deze sluit, wordt de cookie verwijderd uit de geschiedenis van je browser, waardoor ze een lager beveiligingsrisico vormen. Je hoeft geen vervaldatum op te geven.

Third-party cookies

Third-party cookies worden aangemaakt door een site die je momenteel niet bezoekt. Meestal zijn deze cookies nuttig om een gebruiker te volgen die op een advertentie heeft geklikt en deze te koppelen aan het domein dat hen heeft doorverwezen.

Cookies aanmaken

We kunnen cookies op twee manieren aanmaken:

Stuur Set-Cookie in de HTTP response-header. Afhankelijk van de technologieën die voor de webserver worden gebruikt, kun je cookie-headers beheren met behulp van tools en bibliotheken. Cookies kunnen informatie bevatten zoals een vervaldatum en beveiligingsfuncties zoals de secure-richtlijn en de HttpOnly flag.

HttpOnly: Dit geeft aan dat de browser cookies niet kan lezen of wijzigen.
Secure: Dit geeft aan dat de cookie alleen via HTTPS kan worden verzonden.

Met behulp van de JavaScript document.cookie-eigenschap kunnen we cookies aanmaken, lezen en verwijderen.

Stap 1 — Een cookie aanmaken

Vervolgens demonstreren we het proces van het aanmaken van een JavaScript-cookie. Cookies worden opgeslagen in de indeling van een naam-waarde-paar:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

In de bovenstaande cookie is UserName de naam van de cookie, terwijl CloudSigma de waarde is die erin is opgeslagen.

De cookie heeft een vervaldatum. Standaard wordt deze automatisch verwijderd bij het afsluiten van de browser. Je kunt ook een vervaldatum aan je cookie toevoegen:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

Standaard horen cookies bij de huidige pagina. We kunnen de cookie echter ook specificeren met behulp van de path-parameter:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

Cookie Max-Age vs Cookie Expire

Afhankelijk van je behoeften kun je deze twee strategieën gebruiken om de vervaldatum van een cookie in te stellen. Het verschil tussen de twee is dat expires een vervaldatum instelt waarop een cookie wordt verwijderd. Daarentegen stelt de max-Age stelt de tijd in seconden in waarop een cookie wordt verwijderd. Helaas wordt max-age niet door alle browsers ondersteund.

Voorbeeld van het instellen van een cookie met behulp van expires en max-age:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // in milliseconden
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // in milliseconden

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

Step 2 — Reading a Cookie

Het document.cookie-attribuut retourneert een string. Als er twee of meer cookies zijn, gebruiken we een puntkomma ( ;) en een spatie om ze te scheiden.

We gebruiken de split()-methode om een individuele cookie uit een lijst met cookies te extraheren. Deze methode splitst de lijst op in individuele naam- en waardeparen. Zodra dit is gebeurd, kunt u zoeken naar de doelcookie die u wilt lezen:

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("Welkom terug, " + UserName);
} else {
    firstName = prompt("Voer uw gebruikersnaam in:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("Welkom terug, " + UserName);

} else {

firstName = prompt("Voer uw gebruikersnaam in:");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

Laten we de functies die we in de code hebben gemaakt eens bekijken:

Functienaam	Beschrijving
setCookie()	Maakt een cookie aan
getCookie()	Leest de waarde van de cookie
checkCookie()	Controleert of de UserName is ingesteld of niet.

In de volgende stap leren we hoe we een cookie kunnen bijwerken.

Step 3 — Updating a Cookie

We kunnen nieuwe waarden instellen voor onze cookie-attributen. Laten we in ons voorbeeld het abonnement van de gebruiker bijwerken van een maandelijks abonnement naar een driemaandelijks abonnement.

Laten we het max-age-attribuut van de UserName cookie bijwerken van 30 dagen naar 180 dagen:

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

Step 4 — Deleting a Cookie

Het hernoemen van de cookie met dezelfde naam zal de cookie die u wilt wissen verwijderen. We kunnen een cookie verwijderen door het max-age-attribuut in te stellen op 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

Daarnaast, als de cookie een specifiek pad heeft, verwijder deze dan door dit op te geven:

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

Conclusie

Cookies zijn noodzakelijk voor een website om goed te werken en te functioneren. In deze inleidende handleiding hebben we cookies en hun verschillende typen in detail besproken. Daarnaast hebben we aan de hand van een voorbeeld geleerd hoe we met cookies kunnen werken. Nu je vertrouwd bent met het gebruik van JavaScript-cookies, kun je beginnen met het maken van aangepaste cookies om meer over dit onderwerp te leren en te ontdekken.

Bovendien zijn er veel handleidingen over JavaScript en webontwikkeling die je kunt ontdekken op onze blog:

Veel computerplezier!

Preslav Dobrev

Auteur · CloudSigma

Preslav Dobrev is een creatief ontwerper bij CloudSigma, met de nadruk op een consistente bedrijfsidentiteit door middel van traditionele en innovatieve marketingkanalen. Hij is bedreven in het samenvoegen van artistieke visie met strategische marketing om impactvolle merkverhalen te creëren.