Essentiële kennis voor SPA en React - De ultieme gids voor browseropslag

Server-side frameworks zoals Django of Spring gebruiken voornamelijk sessiebeheer (Session) die aan de server worden toevertrouwd en identificeren cliënten via cookies. Dit is handig omdat de server de status beheert.

Echter, in een SPA (Single Page Application) omgeving zoals React, Vue of Angular speelt de cliënt (browser) een grote rol. Communicatie met de server gebeurt voornamelijk via API's, en zaken zoals gebruikersstatus en UI-instellingen worden vaak direct op de cliënt beheerd.

Het is dan belangrijk om te beslissen "waar" je de gegevens wilt opslaan, en de browser biedt verschillende opslagmogelijkheden. Het duidelijk begrijpen van de kenmerken en toepassingen van elke opslag is essentieel voor efficiënte SPA-ontwikkeling.

Vandaag gaan we de belangrijkste opslagen van de browser bekijken: cookies, lokale opslag (Local Storage), sessie opslag (Session Storage) en IndexedDB.

1. Cookies

Cookies zijn de oorsprong van browseropslag. Ze zijn oorspronkelijk ontworpen om status te behouden (Stateful) tussen server en cliënt.

• Kenmerken:

  • Kleine capaciteit: Ongeveer 4KB, wat een zeer beperkte opslagcapaciteit is.

  • Serververzending: Dit is het grootste kenmerk. Cookies worden automatisch meegestuurd met elke HTTP-aanroep naar de server. Dit is handig wanneer de server de status van de cliënt moet kennen, maar kan ook de prestaties verlagen door onnodige gegevensverzending.

  • Vervaldatum: Via de Expires of Max-Age attributen kan men de vervaldatum instellen. Als dit niet is ingesteld, gedraagt de cookie zich als een sessiecookie (verwijdert bij het afsluiten van de browser).

  • Beveiligingsopties: Men kan beveiligingsinstellingen zoals HttpOnly (bescherming tegen JavaScript-toegang) en Secure (alleen verzenden via HTTPS) gebruiken.

• Hoofdzakelijk gebruik:

  • Authenticatie: Hiermee kan de server inlogauthenticatietokens (zoals JWT) opslaan, zodat de server gebruikers kan identificeren elke keer als deze de pagina verlaat. (Vooral in combinatie met de HttpOnly optie)

  • Gebruikersonderzoek en advertenties: Gebruikersbezoeken of gedragspatronen worden getraceerd. (Bijvoorbeeld, Google Analytics)

  • 'Vandaag niet meer tonen' popup

2. Lokale Opslag (Local Storage)

Dit is een onderdeel van de Web Storage API die in HTML5 is geïntroduceerd. Het is ontworpen om de nadelen van cookies (beperkte capaciteit en automatische serververzending) te compenseren.

• Kenmerken:

  • Grote capaciteit: Hoewel dit per browser verschilt, biedt het meestal tussen de 5MB en 10MB.

  • Geen serververzending: Lokale opslag slaat gegevens alleen op de cliënt op en wordt niet automatisch naar de server verzonden. Dit is geweldig voor gegevens die de server niet hoeft te kennen.

  • Permanent: Gegevens worden permanent opgeslagen. Gegevens verdwijnen niet, tenzij de gebruiker de browsercache handmatig verwijdert of localStorage.removeItem() aanroept via JavaScript.

  • Gemakkelijke API: Het biedt eenvoudige API's zoals localStorage.setItem('key', 'value') en localStorage.getItem('key'). (Alleen strings kunnen worden opgeslagen.)

• Hoofdgebruik:

  • Opslaan van gebruikersinstellingen: Voor het opslaan van UI-instellingen, zoals donkermodus/lichtmodus en taalinstellingen.

  • Opslaan van niet-gevoelige gegevens: Bijv. Lijst van laatst bekeken inhoud of autosave-functies.

  • Gegevenscaching: Gegevens uit API-antwoorden die vaak niet veranderen, cachen om onnodige verzoeken te verminderen.

3. Sessie Opslag (Session Storage)

Dit deelt bijna alle kenmerken met lokale opslag, maar er is een cruciaal verschil in de levenscyclus van de gegevens.

• Kenmerken:

  • Grote capaciteit: Biedt ongeveer 5MB, net als lokale opslag.

  • Geen serververzending: Gegevens worden alleen op de cliënt opgeslagen.

  • Session-based levenscyclus: Gegevens zijn beperkt tot de huidige browser tab (of venster). Als die tab wordt gesloten, worden alle gegevens in de sessieopslag onmiddellijk verwijderd.

  • Gegevensisolatie: Zelfs bij dezelfde domein zijn de gegevens niet gedeeld tussen verschillende tabs.

• Hoofdgebruik:

  • Opslaan van eenmalige gegevens: Geschikt voor het opslaan van informatie die alleen binnen de huidige tab nodig is.

  • Tijdelijke formuliergegevens: Voor tijdelijke opslaan van gegevens die gebruikers invoeren in meerdere stappen van registratieformulieren of enquêtes, zolang de tab open blijft.

  • Gegevens behouden bij verversen: Gegevens moeten behouden blijven bij het vernieuwen van de pagina, maar moeten verdwijnen als de tab wordt gesloten.

4. IndexedDB

Als lokale/sessie opslag een eenvoudige Key-Value opslag zijn, dan is IndexedDB een volwaardige transactie-database-systeem binnen de browser.

• Kenmerken:

  • Grote opslagcapaciteit: Tot honderden MB tot enkele GB, zover als de schijfruimte van de gebruiker het toelaat (afhankelijk van browserbeleid) kunnen zeer grote gegevens opgeslagen worden.

  • Verschillende gegevensstructuren: Niet alleen strings, maar ook JavaScript-objecten, bestanden (Blob), arrays en andere complexe gegevensstructuren kunnen worden opgeslagen.

  • Transacties ondersteunen: Dit garandeert de integriteit en consistentie van de gegevens. Meerdere handelingen kunnen als één eenheid worden behandeld.

  • Asynchrone API: Alle handelingen in IndexedDB worden asynchroon verwerkt. Dit zorgt ervoor dat de hoofd-UI-thread niet wordt geblokkeerd terwijl grote gegevens worden gelezen en geschreven, waardoor de responsiviteit van de app behouden blijft.

  • Ondersteuning voor indexen: Indexen kunnen worden aangemaakt zodat specifieke velden snel kunnen worden doorzocht.

• Nadelen:

  • Complexe API: De API is veel complexer en moeilijker te gebruiken in vergelijking met localStorage. (Dit is de reden waarom vaak wrapper-bibliotheken zoals Dexie.js of idb worden gebruikt.)

• Hoofdgebruik:

  • Offline webapplicaties (PWA): Opslaan van cruciale gegevens in apps die zonder netwerkverbinding moeten werken. (Bijvoorbeeld een offline documenteditor)

  • Caching van state in grootschalige applicaties: Dit wordt gebruikt wanneer applicaties zoals Gemini of ChatGPT gespreksgeschiedenis in de browser moeten opslaan of complexe gebruikersgegevens moeten beheren.

  • Tijdelijke opslag van door de gebruiker aangemaakte inhoud: Veilig bewaren van lange teksten, afbeeldingsbewerkingsgegevens, etc. voordat deze naar de server worden geüpload.

5. Vergelijk desgewenst

Als we de kenmerken van de vier opslagmethodes in een tabel samenvatten, ziet het eruit als volgt:

6. Conclusie: Wanneer en wat te gebruiken?

Bij het ontwikkelen van een SPA zoals React is het goed om de toepassingen van deze vier opslagen duidelijk te onderscheiden.

• Cookies:

  • Gebruik voor gegevens die de server absoluut moet kennen. (Bijvoorbeeld: veilige authenticatietokens)

  • Het is raadzaam om de HttpOnly optie te gebruiken om tokens te beschermen tegen XSS-aanvallen.

• Lokale Opslag:

  • Gebruik voor simpele gegevens die bewaard moeten blijven, zelfs als de gebruiker de browser afsluit.

  • (Bijvoorbeeld: gebruikers UI-thema-instellingen, taalkeuzes)

• Sessie Opslag:

  • Gebruik voor tijdelijke gegevens die alleen tijdens de huidige sessie (tab) nodig zijn.

  • (Bijvoorbeeld: tijdelijke opslagen van invoer in meerfaseformulieren)

• IndexedDB:

  • Gebruik voor gestructureerde grote gegevens of wanneer offline ondersteuning nodig is.

  • (Bijvoorbeeld: complexe app-status, caching van gespreksgeschiedenis of offline documentgegevens)

Belangrijke beveiligingsinstructie: Lokale opslag, sessie opslag en IndexedDB zijn gemakkelijk toegankelijk via JavaScript. Dit betekent dat ze kwetsbaar zijn voor XSS (Cross-Site Scripting) aanvallen. Wachtwoorden, persoonlijke identificatiegegevens en gevoelige authenticatietokens mogen hier nooit worden opgeslagen. (De veiligste manier is om HttpOnly cookies te gebruiken voor authenticatietokens.)