Cookies & Storage (helaas geen chocolate chip cookies)

Helaas dit is geen recept voor chocalate chip cookies of lekkere boterkoekjes. Cookies zijn hele kleine bestandjes die bewaard worden op de computer van de gebruiker. Ze kunnen ongeveer 4kb aan data bevatten en zijn ontworpen dat ze zowel door de webserver als door de client computer beschikbaar zijn. Cookies kunnen gebruikt worden als een vorm van storage voor websites en webapplicaties. Naast cookies zijn er ook nog local storage en session storage.
updated: Jun 25, 2020 at 1:04PM | published: Jun 19, 2020

Helaas dit is geen recept voor chocolate chip cookies of lekkere boterkoekjes. En hoewel deze onmisbaar zijn voor elke developper ga ik het vandaag hebben over een ander soort cookies die niet weg te denken zijn uit het leven van een developper. We worden allemaal moe van alle meldingen die we krijgen als we weer een nieuwe website bezoeken en we een popup krijgen dat we de cookievoorkeuren moeten accepteren. Maar wat is een cookie nou eigenlijk en wat doet een cookie nou precies.

Cookies kunnen gebruikt worden als een vorm van storage voor websites en webapplicaties. Naast cookies zijn er ook nog local storage en session storage. Ze hebben alle 3 hun voor en nadelen en afhankelijk van de situatie is het beter om de een of de ander te gebruiken.

Cookies

Cookies zijn hele kleine bestandjes die bewaard worden op de computer van de gebruiker. Ze kunnen ongeveer 4kb aan data bevatten en zijn ontworpen dat ze zowel door de webserver als door de client computer beschikbaar zijn. Met elk request van de webserver wordt het cookie meegezonden dit zorgt ervoor dat de webserver een webpagina kan teruggeven die gepersonaliseerd is voor elke gebruiker. Op een cookie kan alleen maar data in de vorm van een string gezet worden. Wil je een object of een array erop zetten dan moet je hem eerst converteren naar een string.

Cookies kunnen voor verschillende dingen worden gebruikt bijvoorbeeld het onthouden van welke pagina’s een gebruiker bezocht heeft of het onthouden welke artikelen een gebruiker in een winkelwagentje heeft gestopt. Op elke cookie zit een auto-expire optie waar je de datum op kan zetten dat ze verwijderd worden.

Fun Fact
Cookies zijn voor het eerst in Netscape 1.0 geïntroduceerd. Internet Explorer ondersteunde cookies pas vanaf versie 2.0.

Er zijn 2 soorten cookies persistant en session cookies.

Session cookies bevatten geen auto-expire optie maar ze zijn net zo lang geldig als de browser tab geopend is. Zodra je de ‘sessie’ afsluit vervalt het cookie. Dit soort cookies wordt vaak gebruikt voor het opslaan van login gegevens van beveiligde websites zodat men niet de hele tijd hoeft in te loggen als je door de site heen bladert.

Persistent cookies hebben wel een expiratie datum. Deze worden bewaard op de computer totdat de expiration datum is bereikt. Dit soort cookies worden vaak gebruikt voor marketing doeleinden en worden ook wel tracking cookies genoemd. Ze worden gebruikt om het surfgedrag van de gebruiker te registreren zodat bijvoorbeeld webwinkels gerichte reclames kunnen laten zien voor die specifieke klant.

JS

//maak een cookie aan
document.cookie = “username=John Doe”;

//zet er een expiratiedatum op
document.cookie = “username=John Doe; expires=Thu, 31 Dec 2020 12:00:00 UTC”;

//met de path parameter kan je zeggen bij welke pagina de cookie toebehoort
document.cookie = “username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/”;

//veranderen werkt op dezelfde manier als het creeeren je overschrijft de oude cookie
document.cookie = “username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/”;

localStorage

Met de komst van HTML 5 is er een nieuw storage opject gekomen, localStorage. Dit heeft ertoe geleid dat het gebruik van cookies voor een deel vervangen werd door localStorage. Het belangrijkste verschil is dat niet met elk request de data in het storage object heen en weer verstuurd moet worden. Dit vermindert de hoeveelheid verkeer die heen en weer gestuurd moet worden aanzienlijk. Nog een voordeel is dat het de hoeveelheid data die in het storage object gestopt kan worden 5mb is, behoorlijk meer dan de 4kb die geld voor cookies.

LocalStorage is niet voor alles te gebruiken aangezien je soms data naar de server moet kunnen sturen en dat kan alleen met een cookie. Een van de voorbeelden binnen onze infra het gebruik van de divi builder dit is een vrij zware applicatie die toch vrij snel draait. Dit komt doordat de verschillende elementen bewaard worden in de localstorage.

Een ander voorbeeld is als je op een webapplicatie settings aanpast hij deze bewaard voor de volgende keer. Op die manier als je later weer inlogt hij deze settings onthoudt voor de volgende keer. Dit doet hij door de settings van de webapplicatie in local storage te zetten.

Hieronder een klein voorbeeldje van localStorage. 

Klik op de button en kijk wat er gebeurt. Als je de browser sluit en weer opnieuw opent zal de counter doorgaan.

JS

// bewaar data in localStorage
localStorage.lastname = “Doe”;

// haal data op uit localStorage
localStorage.lastname

// verwijder specifieke key uit localStorage
localStorage.removeItem(‘lastname’);

// verwijder alle localStorage
localStorage.clear();

sessionStorage

Zowel local als sessionStorage breiden het Storage object uit. Het enige verschil is dat sessionStorage net als een session cookie verwijderd wordt als het tabblad gesloten wordt. Sessionstorage wordt vaak gebruikt voor het opslaan van een gebruikersnaam of voor data dat elke sessie veranderd.

JS

// bewaar data
sessionStorage.lastname = “Doe”;

// ophalen data
sessionStorage.removeItem(‘lastname’);

Zoals je je kan voorstellen heeft elke methode zo zijn voor en nadelen. En hoewel cookies een negatieve naam krijgen zijn ze zeker niet nutteloos integendeel zelfs. En hoewel het niet meer de oplossing is voor elk probleem zullen ze zeker niet verdwijnen. Als je een hoop data moet opslaan die niet naar de server hoeft dan is localStorage de oplossing maar als je data moet versturen met je http requests dan heb je een cookie nodig.

Heb je een project waarbij je denkt localStorage nodig te hebben of heb je hulp nodig bij het implementeren van cookies. Neem dan contact op met ons en misschien kunnen we wat voor je betekenen.


Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de ReactHooks serie! We gaan het hebben over useCallback en over useMemo. Met deze hooks kunnen we waardes of callback memoizen dit kan nuttig zijn bij zware operaties of om te zorgen dat bepaalde componenten niet altijd mee rerenderen. Zeker omdat bij kleine applicatie het vaak efficienter is om niet te optimaliseren dan wel.

Lees meer
Redux de Intro!

Redux de Intro!

Deze week een korte introductie van de 4 basisbegrippen die je nodig hebt om Redux te begrijpen. We gaan kort uitleggen hoe state wordt aangepast in een Redux Store met behulp van Reducers en Actions. En we vertellen wat al deze begrippen doen en hoe ze werken in een Redux applicatie.

Lees meer

Software ontwikkeling op maat

Hoe werkt het?

Wat wonderen doet voor het ene bedrijf kan zinloos zijn voor een ander bedrijf. Daarom hebben we oplossingen op maat die het unieke karakter van jouw bedrijf respecteren. We werken in een positieve spiraal van testen, monitoren en verzamelen gegevens om precies te weten te komen wat voor jou werkt en wat niet. Het is onze ‘whole package’-mindset, een aandacht voor details die ons in staat stelt om elke keer jouw prestatiedoelstellingen te bereiken. Dus ontspan en geniet van de rit!