Cookies: Gegevens van je website onthouden

Sommige websites onthouden wanneer je die voor het laatst hebt bezocht of hoeveel keer je er al bent geweest. Deze site doet dat ook. Hier staat beschreven hoe je dat kunt doen.

De code staat onderaan deze bladzijde. Je kunt hem ook downloaden.

Voor het onthouden van gegevens van je site zijn er drie mogelijkheden: In een database op de server, in Web storage (ook wel localStorage genoemd of in een zg. "cookie" op je PC. De laatste methode wordt hier besproken.

De meeste moderne browsers kunnen worden ingesteld om cookies te weigeren. In de praktijk betekent dat dat ze helemaal niet meer worden gebruikt. Dat geldt dus ook voor bestaande cookies.

Ook deze site plaatst cookies. Daarin worden twee dingen bijgehouden:

1. De datum en het tijdstip van het laatste bezoek. Dit wordt onderaan de startpagina getoond.
2. Het aantal keren dat je hier al geweest bent. Dat zie je in de linker kolom, helemaal onderaan.

De code voor het onderhouden van de cookies vind je in de file bbcookie.js, die je kunt downloaden. Naast de hierboven genoemde cookies is er ook nog de mogelijkheid om je naam te onthouden. Als die niet bekend is wordt er om gevraagd. Als je op de knop hieronder drukt verschijnt er een prompt waar je je naam in kunt vullen. Daarna komt er een window waar de gegevens uit de cookie van deze site worden weergegeven. Daar is ook een knop waarmee je de gegevens uit de cookies kunt wissen. Om het goed te laten werken is het noodzakelijk dat je browser cookies accepteert.

Druk op de knop om de cookies te proberen.    Probeer...  

• De file bbcookie.js bevat vier functions die zonder meer gebruikt kunnen worden:
  1. Who(). Deze function haalt de naam van de gebruiker op. Als die niet bekend is wordt er om gevraagd. De opgegeven naam wordt opgeslagen.
  2. Count(). Deze function haalt het aantal eerder afgelegde bezoeken op. Als dat niet bekend is wordt nul teruggegeven. Anders wordt het aantal met één verhoogd en bewaard.
  3. When(). Deze function haalt het tijdstip van het vorige bezoek op. Als dat er niet is wordt een lege string teruggegeven. De huidige systeem-datum en -tijd worden bewaard voor het volgende bezoek.
     De datum wordt "onbewerkt" in de cookie opgeslagen. Voor gebruik van de gegevens moet je ze meestal opmaken. Dat kan bijvoorbeeld met de functions ToonDag, ToonDatum en ToonTijd, waarvan je de code kunt vinden in het item "Systeem-datum tonen op een web-pagina".
     Voorbeeld: Op de openingspagina van deze site worden datum en tijd van je laatste bezoek aan deze site getoond.
     De code daarvan luidt:

     <script>
     var toen = When();
     if (toen.length != 0)
       document.write('Laatste bezoek was: '+ToonDag(toen)+', '+ToonDatum(toen)+' om '+ToonTijd(toen)+' uur.');
     </script>

  4. EraseCookie(). Deze function verwijdert alle cookies van de site, door achtereenvolgende aanroepen van de function DeleteCookie (zie hieronder). Doordat de gegevens actief worden verwijderd (dus niet door het verlopen van de vervaldatum) verwijdert de browser de cookie-gegevens fysiek uit de PC.
• Naast de hierboven genoemde functies is er ook nog de functie DeleteCookie(Naam). Hiermee verwijder je de cookie Naam. Bijvoorbeeld: De code:

  DeleteCookie('VisitorName')

  verwijdert de naam van de bezoeker, maar laat de andere gegevens intact.
• Voor deze site zijn mogelijke aanroepen van DeleteCookie:
  • DeleteCookie('VisitorName'). Verwijdert de naam van de bezoeker.
  • DeleteCookie('WWHCount'). Verwijdert de bezoek-teller.
  • DeleteCookie('WWhenH'). Verwijdert de datum van het laatste bezoek.
• De overige functions in bbcookie.js dienen met zorg te worden gebruikt. Je kunt ze beter niet gebruiken als je niet 100% zeker bent van wat je doet.
   

De inhoud van een cookie
In een cookie staan maximaal tien blokken met data, waarvan je er acht in kunt stellen. In de praktijk is dat één lange string, gescheiden door punt-komma's. Elk datablok heeft een naam en meestal ook een waarde. Ze hoeven niet in een bepaalde volgorde te staan. De naam bepaalt wat de browser er mee doet.

Er zijn twee soorten cookies:

• session cookie, ook wel transient-cookie, in-memory cookie, of non-persistent cookie genoemd. Deze cookies worden niet op de schijf opgeslagen, maar worden in het RAM-geheugen bewaard totdat de gebruiker de browser sluit. In deze cookies ontbreekt het blok expires; daaraan herkent de browser dat het om een session cookie gaat.
• persistent cookie. Dit soort cookies heeft altijd een expires-datablok. De browser bewaart ze op de harddisk van de PC, zodat ze beschikbaar worden als de browser opnieuw wordt gestart.
  Deze cooking worden ook wel tracking cookie genoemd omdat ze adverteerders in staat stellen om na te gaan of er op hun advertentie is geklikt.
  persistent cookies kunnen in twee groepen worden verdeeld:
  • first-party cookie. Dit zijn cookies die worden gezet door de site zelf.
  • third-party cookie. Dit zijn cookies die door andere sites worden gezet. Als je site advertenties of andere content bevat die van een ander domein afkomstig is, sturen die cookies mee. Dat kan om grote aantallen gaan. Dit soort cookies wordt tegengehouden door ad-blockers.
   

Naam		Omschrijving
domain		Domein van de site die de cookie plaatst. Optioneel, als je het weglaat wordt door het de browser ingesteld op het pad naar de map waar de root van de site is. Voor deze site: home.hccnet.nl "domain=home.hccnet.nl"
path		Pad naar de map met het HTML-document dat de cookie plaatst. Optioneel, als je het weglaat wordt door het de browser ingesteld op het pad naar de map waar de root van de site is. Voor deze site: /s.f.boukes. Als je deze pagina opent met een deep-link (dus zonder frames) is het: /s.f.boukes/html-0. "path=s.f.boukes/"
name		Naam van de cookie. Tenminste één is verplicht aanwezig. Deze site gebruikt de namen VisitorName, WWhenH en WWHCount. "WWHCount=17"
Secure		Optioneel. Geeft aan of je een onbeveiligde (http:) of beveiligde https:) verbinding gebruikt. Als je site een http:-verbinding gebruikt moet je Secure weglaten, anders worden de cookies wel gelezen, maar kunnen ze niet worden bijgewerkt. Als je site een https:-verbinding gebruikt kun je Secure toevoegen. Dan wordt de uitwisseling van cookies tussen de client en de server meegenomen in de beveiliging. "Secure" is alleen een keyword, er zijn geen data aan gekoppeld. N.B. In moderne browsers werken cookies alleen als het http:- of https:-protocol wordt gebruikt. Het werkt niet (meer) met het file:-protocol (een HTML-document dat op je PC openen in je browser door het aan te klikken).
HttpOnly		Optioneel. Geeft aan dat de cookie niet mag worden aangepast door JavaScript. "HttpOnly" is alleen een keyword, er zijn geen data aan gekoppeld.
expires		Optioneel. Als dit wordt weggelaten heb je een session-cookie, anders heb je een permanente cookie. De datum wordt opgeslagen als Greenwich Mean Time (GMT). Deze site zet de vervaldatum op 30 dagen na de datum van de systeemklok, maar je daarvoor kiezen wat je wilt. "expires=" + uiterlijk.toGMTString()
SameSite		Dit keyword kan drie waarden krijgen: Lax, Strict en None. • Lax wordt gebruikt als SameSite niet wordt opgegeven. Het betekent in de praktijk dat de cookie wordt verstuurd met de HTTP-methode GET, in plaats van POST, wat veiliger is. Cookies van third-parties worden geaccepteerd. • Strict Betekent dat de cookie alleen wordt geaccepteerd als die wordt gezet voor en door de site (lees: URL) die in de adresbalk van de browser staat. De cookie wordt verstuurd met POST. • None wordt gebruikt om aan te geven dat cookies worden geaccepteerd van third-parties, dus van buiten de URL. Een voorbeeld daarvan is het gebruik van tracking cookies. SameSite=None Kan alleen op een beveiligde verbinding (https:) worden gebruikt, en moet daarom worden gecombineerd met Secure. Default-waarde is Lax.
Created		Datum en tijdstip dat de cookie is gemaakt. Dit wordt door de browser ingesteld. Je kunt dit niet zelf aanpassen
Accessed		Datum en tijdstip dat de cookie is gelezen en/of veranderd. Dit wordt door de browser ingesteld. Je kunt dit niet zelf aanpassen

Het is verstandig om regelmatig de cookies die je verzamelt te controleren en de "rommel" weg te gooien. Dat geldt voor willekeurig welke browser je gebruikt.
Gooi de gegevens niet zomaar weg, maar gebruik altijd "officiële" software om cookies op te ruimen. Er worden namelijk indexen van bijgehouden, die in de war raken als je zomaar gegevens verwijdert.

Let bij het controleren van cookies ook op de vervaldatum. Het bewaren van verlopen cookies heeft geen zin. Cookies die nog heel lang geldig blijven, zijn nog wel eens afkomstig van sites die andere dingen met cookies willen doen dan datgene waar ze voor bedoeld zijn.
Cookies met een verlopen geldigheid behoren automatisch te worden verwijderd. De praktijk leert dat dat niet altijd gebeurt. Om de verlopen cookies met de hand te vinden en te verwijderen kun je speciaal daarvoor gemaakte programma's gebruiken, bijvoorbeeld ChromeCookiesView van Nirsoft. Daarmee kun je de cookies van Chromium-browsers bekijken en -indien gewenst- verwijderen.
Voor andere dan Chromium-gebaseerde browsers -waaronder FireFox- ben je aangewezen op de instellingen in de browser zelf. Overigens kun je in elke goede, moderne browser de cookies bekijken en beheren.

• Er worden -algemene termen- nog vier items besproken om het werken met cookies toe te lichten. :
  1. Gegevens in een cookie zetten
  2. Gegevens uit een cookie ophalen
  3. Cookie verwijderen
  4. Cookie beveiligen
• Je geeft aan dat je cookies gebruikt door gegevens te plaatsen in de eigenschap cookie van het object document. De code luidt dan ook -simpel gezegd-: document.cookie = ........ Hierbij geef je steeds minimaal drie dingen op: Een variabele, de waarde van die variabele en een vervaldatum.
• De geldigheidsduur van de cookies van deze site is 30 dagen. Deze kun je aanpassen door in de file bbcookie.js de waarde van expDays te verhogen of te verlagen.
• De vervaldatum wordt opgeslagen in GMT (Greenwich Mean Time). Omrekenen wordt door het JavaScript gedaan.
• Zodra een geldig gegeven wordt aangemeld zorgt de browser ervoor dat de cookie wordt bewaard.

Gegevens in een cookie zetten
Je geeft minstens twee en hoogstens negen dingen op: De naam van een variabele, de waarde van die variabele, de vervaldatum, een path, een domain en secure.
Deze site gebruikt alleen naam, waarde en vervaldatum. In de meeste gevallen is dat voldoende. Voor de niet-gebruikte zaken worden lege strings opgeslagen.
De vervaldatum wordt berekend door 30 dagen op te tellen bij de tijd van de systeem-klok.
De vervaldatum bevat de datum en het tijdstip. Vervallen cookies verdwijnen niet uit zichzelf.
In JavaScript gebruik je iets als document.cookie = str, waar in str de inhoud is van de volledige cookie. Zie de file bbcookie.js.

Gegevens uit een cookie ophalen
Je vraagt de waarde van een variabele op en krijgt die terug in een string. Zonodig moet je die nog nabewerken om de verschillende onderdelen (vervaldatum, path, etc.) er uit te filteren. Voorwaarde is wel dat de vervaldatum niet is verstreken, anders krijg je een lege string terug. Hierop kun je testen in je JavaScript, zodat je kunt beslissen hoe het script verder gaat.
In JavaScript gebruik je iets als var str = document.cookie, waar in str de inhoud is van de volledige cookie. Dat is een sting, waarin de datablokken zijn gescheiden door een puntkomma. Daar moet je nog het een en ander aan worden gedaan om het gewenste gegeven eruit te halen, Zie de file bbcookie.js.

Cookie verwijderen
Dit doe je door de vervaldatum te veranderen in een moment dat al verstreken is. De cookie is dan "expired". De browser verwijdert de gegevens niet uit zichzelf, dat moet je zelf doen.
De meeste sites zijn heel slordig met cookies. Het is goed om niet méér gegevens te bewaren dan die echt nodig zijn.

Cookie beveiligen
Voor het beveiligen van cookies zijn er twee mogelijkheden.
Je kunt aan de cooke het keyword Secure toevoegen. Dan wordt de cookie-communicatie tussen de server en de client versleuteld. Dit werkt alleen als je een https:-verbinding gebruikt. Bij een http:-verbinding zoals deze site moet je Secure weglaten, anders vindt er geen communicatie plaats.
De tweede mogelijkheid is door HttpOnly aan je cookie toet te voegen. In dat geval zal de browser niet toestaan dat de cookie door JavaScript wordt gewijzigd. Dit heeft alleen zin als de cookie door de server wordt gemaakt.

Waar staan de cookies?
Een veel gestelde vraag is waar de cookies worden opgeslagen op de harde schijf. Hieronder een overzicht voor moderne en wat oudere browsers.

Browsers die zijn gebaseerd op Chromium

De cookies worden bij elkaar opgeslagen in een bestand:

• In Chrome:
  C:\Users\gebruiker\AppData\Local\Google\Chrome\
    User Data\Default\Network\Cookies
• In Edge (Windows 1709 en later):
  C:\Users\gebruiker\AppData\Local\Microsoft\Edge\
    User Data\Default\Network\Cookies

FireFox

De cookies van alle bezochte websites worden in één file verzameld. Deze file heeft de naam cookies.sqlite. Deze file staat in het Firefox gebruikerspofiel.

Gebruik:

• De code staat voor een deel in de <HEAD> en voor een deel in de <BODY>.

De code ziet er als volgt uit:
 
(Zet dit JavaScript bij voorkeur in de <HEAD>)

<script src="bbcookie.js"></script>

 
In de <BODY> zet je code om gegevens uit de cookies op te halen, bijvoorbeeld:

  <script>
  document.write('Uw Naam:'+Who()+'<br>');
  document.write('Aantal bezoeken:'+Count()+'<br>');
  document.write('Laatste bezoek:'+When()+'<br>');
  </script>

Downloaden:
 
Druk op de knop:  File: voorb054.zip, 1739 bytes.

Opmerking:
 
Je kunt de bezoekteller in de linker kolom ("U was hier al ... keer") terugzetten op 0 door er op te klikken. Bij je volgende bezoek aan deze site staat de teller weer op nul.