Opslag aan de clientzijde is essentieel voor webtoepassingen. Het is misschien niet zo kogelvrij als opslag aan de serverzijde, maar zonder dit zouden web-apps niet in staat zijn om veel moderne functies te implementeren. Allerlei functies zijn afhankelijk van de opslag aan de clientzijde, van sessies in games tot winkelwagentjes op e-commercewebsites.

Dankzij opslag aan de clientzijde kunnen web-apps ook een privacygerichte architectuur implementeren. U kunt het gebruiken om ervoor te zorgen dat gevoelige gegevens nooit het apparaat van een gebruiker verlaten.

Wat is client-side opslag?

Bij webontwikkeling verwijst client-side opslag naar de verschillende manieren waarop webbrowsers gegevens kunnen opslaan. Een applicatie kan deze gegevens vervolgens gebruiken om gebruikers functionaliteit te bieden. Opslag aan de clientzijde is om een ​​aantal redenen van cruciaal belang:

  • Gegevens die op de client zijn opgeslagen, zijn aanzienlijk sneller toegankelijk en uw app heeft er toegang toe zonder internet.
    • instagram viewer
  • Client-side opslag maakt het voor uw toepassing gemakkelijker om de voorkeuren van elke gebruiker te onthouden.
  • Door sommige gegevens permanent op de client op te slaan, wordt het gemakkelijker om de privacy van gebruikers te beschermen.
  • Het opslaan van alle applicatiegegevens op de server is duur, vooral op grote schaal.

Er zijn verschillende vormen van client-side opslag die u in uw web-apps kunt gebruiken.

Koekjes

Een browsercookie is een stukje sleutel-/waardegegevens dat als een tekenreeks op uw computer wordt opgeslagen. Browsers sturen bij elk verzoek alle cookies voor een bepaalde site naar de server van de site. Cookies waren het eerste (en een tijdje het enige) type client-side opslag.

Er is geen officiële limiet voor de grootte van een cookie, maar individuele browsers stellen verschillende limieten voor de grootte en het aantal cookies dat u kunt instellen. De RFC 6265 Sectie 6.1 stelt de volgende minimale cookie-mogelijkheden die browsers (user agents) moeten bieden:

Praktische user-agent-implementaties hebben limieten voor het aantal en de grootte van cookies die ze kunnen opslaan. User agents voor algemeen gebruik MOETEN elk van de volgende minimale mogelijkheden bieden:

  • Ten minste 4096 bytes per cookie (gemeten aan de hand van de som van de lengte van de naam, waarde en attributen van de cookie).
  • Minimaal 50 cookies per domein.
  • In totaal minimaal 3000 koekjes.

Cookies kunnen gedurende verschillende tijd in de browser blijven. Sommige verlopen aan het einde van een paginasessie en sommige hebben een willekeurige vervaldatum die tot maanden in de toekomst kan reiken.

Browsers maken een paginasessie wanneer u een nieuw tabblad opent en ze beëindigen deze wanneer u het tabblad of de browser sluit. Als u de pagina opnieuw laadt of vernieuwt, beëindigt de browser de paginasessie niet.

Cases voor cookies gebruiken

Cookies zijn het meest geschikt voor het opslaan van kleine stukjes gegevens die de server vaak moet lezen of wijzigen. Waarom?

  • Cookies worden automatisch toegevoegd aan alle netwerkverzoeken
  • Cookies kunnen alleen kleine hoeveelheden stringgegevens opslaan.

U kunt cookies gebruiken om een ​​gebruiker te identificeren (zoals een sessie-ID), een paginabezoek vast te leggen voor bladwijzerdoeleinden of de hoogste score van een game op te slaan.

Lokale opslag

Net als een cookie is localStorage een sleutel/waarde-archief dat tekenreeksgegevens opslaat. Hoewel beide opslagtypes vergelijkbaar zijn, verschillen localStorage en cookies op verschillende manieren:

  • LocalStorage is afhankelijk van JavaScript.
  • Gegevens in localStorage bevinden zich voornamelijk in de browser. Je moet het bewust naar de server sturen, in plaats van dat de browser het bij elk verzoek verzendt.
  • LocalStorage heeft geen vervaldatum. Het blijft op de client staan ​​totdat een ontwikkelaar het verwijdert met JavaScript of de gebruiker zijn browseropslag wist.
  • LocalStorage heeft een veel grotere opslagcapaciteit. De WHATGG-specificatie specificeert geen harde limiet, maar volgens Wikipedia, de minimale grootte van localStorage onder de belangrijkste browsers is 5 MB:

Browsers beperken cookies tot 4 kilobyte. Webopslag biedt een veel grotere opslagcapaciteit:

  • Opera 10.50+ staat 5 MB toe
  • Safari 8 staat 5 MB toe
  • Firefox 34 staat 10 MB toe
  • Google Chrome staat 10 MB per herkomst toe
  • Internet Explorer staat 10 MB per opslagruimte toe

Gebruiksscenario's voor LocalStorage

LocalStorage is perfect voor het opslaan van een grote hoeveelheid gegevens waarnaar de server zelden hoeft te verwijzen. Dit kunnen de gebruikersinstellingen van een toepassing, details van de themaconfiguratie of de gegevens in een recent ingevuld formulier zijn. Dit komt omdat localStorage een veel grotere opslaglimiet heeft dan cookies, maar u moet extra moeite doen om de gegevens naar de server te verzenden.

Als u de gegevens opslaat als JSON, kunt u redelijk complexe gegevens opslaan met localStorage, ook al kunnen er alleen strings worden opgeslagen.

LocalStorage is kwetsbaar voor: XSS-aanvallen, dus u moet er geen gevoelige klantgegevens in opslaan.

SessieOpslag

SessionStorage is een sleutel/waarde-winkel die werkt bijna hetzelfde als localStorage, behalve voor een ding. De opgeslagen gegevens blijven alleen bestaan ​​voor de duur van een paginasessie.

Cases gebruiken voor SessionStorage

U kunt SessionStorage gebruiken om hetzelfde type gegevens op te slaan als localStorage, maar alleen wanneer de gegevens niet langer hoeven te worden bewaard dan een paginasessie.

GeïndexeerdeDB

IndexedDB is een krachtige browser-API voor het opslaan van grote hoeveelheden gestructureerde gegevens. Het is een transactionele, objectgeoriënteerde database die gegevens opslaat in sleutel/waarde-paren.

Als je te maken hebt met kleinere hoeveelheden gegevens, is localStorage/sessionStorage de betere, gemakkelijkere keuze. Helaas worden ze beperkt door hun opslagcapaciteit en het feit dat ze alleen stringgegevens kunnen opslaan. Met IndexedDB kunnen niet alleen verschillende soorten gegevens worden opgeslagen, inclusief bestanden/binaire gegevens, maar het kan ook veel meer gegevens opslaan. IndexedDB maakt ook indexen van de inhoud ervan om snel in de database te kunnen zoeken.

Gebruiksscenario's voor IndexedDB

IndexedDB is in wezen een NoSQL-database in de browser en kan zeer grote hoeveelheden gegevens opslaan. Elke use case waarvoor meer dan 10 MB aan gegevens moet worden opgeslagen, is geschikt voor IndexedDB.

In tegenstelling tot de andere vormen van browseropslag, is IndexedDB niet beperkt tot het opslaan van strings. IndexedDB kan gegevens van alle standaard JavaScript-typen opslaan. Als u een webtoepassing bouwt om voornamelijk offline te werken, kunt u IndexedDB gebruiken om alle gegevens van de toepassing op te slaan.

Client-side opslag is flexibel en krachtig

De term client-side opslag verwijst naar het opslaan van applicatiegegevens in de browser. Client-side opslag is essentieel voor het functioneren van de meeste moderne webapplicaties. Er zijn verschillende soorten opslag aan de clientzijde: cookies, local/sessionStorage en IndexedDB.

Alle soorten browseropslag hebben verschillende limieten voor hun capaciteit en het type gegevens dat ze kunnen opslaan. Cookies zijn het meest beperkte type, local/sessionStorage is het handigst en IndexedDB is het krachtigst.