Met local storage slaan websites data direct in je browser op, zodat die tussen bezoeken blijft staan. Lees hoe het werkt, waarvoor websites het gebruiken en wat het voor je site betekent.
Heb je weleens een voorkeur op een website ingesteld, het tabblad gesloten en later teruggekomen om alles precies zo te vinden als je het had achtergelaten? Je weergave-instellingen waren nog hetzelfde, je opgeslagen items stonden er nog en je hoefde niets opnieuw in te stellen. Dat is local storage dat stilletjes op de achtergrond zijn werk doet.
In het vorige hoofdstuk over soorten browseropslag hebben we local storage voorgesteld als een van de belangrijkste manieren waarop browsers data bewaren. Dit hoofdstuk gaat dieper in op wat local storage precies is, hoe het werkt en welke rol het op je website speelt.
Wat is local storage?
Local storage is een soort browseropslag waarmee websites kleine stukjes data direct op het apparaat van een bezoeker bewaren. Die data blijft in de browser staan, ook nadat de bezoeker het tabblad sluit of zijn computer uitzet. Bezoekt hij dezelfde website de volgende keer, dan heeft de browser die data nog en kan de site die gebruiken om zijn vorige situatie te herstellen.
Dit maakt local storage anders dan session storage, dat leegloopt als het tabblad sluit. Local storage is blijvend. Het verloopt niet automatisch. De data blijft staan totdat de gebruiker zijn browser leegmaakt, of totdat de website zelf de data verwijdert.
Hoe werkt local storage?
Local storage werkt als een eenvoudige key-valueopslag. Zie het als een klein notitieblok in de browser, waarin een website informatie opschrijft met een label en een waarde. Het label is de key en de informatie die eronder is opgeslagen is de value. Heeft de website die informatie weer nodig, dan zoekt hij de key op en haalt hij de waarde op.
Een website kan bijvoorbeeld een key "theme" met de waarde "dark" opslaan als een bezoeker overschakelt naar de donkere modus. Komt die bezoeker de volgende keer terug, dan kijkt de website in local storage, vindt de key "theme", leest de waarde "dark" en past de donkere modus automatisch toe, nog voordat de pagina volledig is opgebouwd.
Elke website krijgt zijn eigen afgeschermde local storage. Een website kan alleen zijn eigen data lezen en schrijven. Hij kan niet zien wat een andere website heeft opgeslagen. Deze afscherming is een beveiligingsfunctie die in elke browser zit.
Waarvoor gebruiken websites local storage?
Gebruikersvoorkeuren opslaan
Weergave-instellingen, taalvoorkeuren, themakeuzes en lay-outopties zijn veelvoorkomende dingen die in local storage staan. Het zijn niet-gevoelige voorkeuren die de ervaring verbeteren als een bezoeker terugkomt.
Items bewaren tussen sessies
Sommige websites gebruiken local storage om items te bewaren waarmee een bezoeker iets heeft gedaan, zoals een leeslijst, een verlanglijstje of onlangs bekeken items, zodat ze er bij het volgende bezoek nog zijn, ook als de bezoeker niet is ingelogd.
Minder serververzoeken
Slaat een website informatie lokaal op, dan kan hij die direct uit de browser ophalen in plaats van elke keer een verzoek naar de server te sturen. Dat versnelt de ervaring voor terugkerende bezoekers en verlaagt de belasting van de backend.
De status van formulieren en meerstapsprocessen bewaren
Sommige websites gebruiken local storage om de voortgang in een formulier met meerdere stappen of een afrekenproces tijdelijk op te slaan. Sluit een bezoeker per ongeluk het tabblad, dan is zijn voortgang niet kwijt als hij terugkomt.
Wat zijn de grenzen van local storage?
Local storage is bedoeld voor kleine data. De meeste browsers staan ongeveer 5 tot 10 megabyte per website toe, wat ruim voldoende is voor voorkeuren en instellingen, maar niet voor grote bestanden of complexe datasets. Het slaat ook alleen tekst op. Getallen, objecten en arrays moeten eerst naar tekst worden omgezet voordat ze kunnen worden opgeslagen, en weer worden teruggezet als ze worden opgehaald.
Local storage is ook niet de juiste plek voor gevoelige informatie. Omdat elk script op de pagina erbij kan, is het een veiligheidsrisico om wachtwoorden, persoonlijke gegevens of betaalgegevens in local storage te bewaren. Gevoelige data hoort op de server, beschermd door SSL en goede authenticatie.
Wil je local storage naast de andere soorten opslag zetten en vergelijken, lees dan soorten browseropslag.
Veelgestelde vragen
Werkt local storage zonder internetverbinding?
Ja. Local storage staat op het apparaat van de bezoeker, niet op een server. De data is beschikbaar, ook als de browser offline is. Dit is een van de redenen waarom local storage vaak samen met service workers en cache storage wordt gebruikt om websites te bouwen die gedeeltelijk of volledig offline werken.
Wordt local storage gedeeld tussen verschillende browsers op hetzelfde apparaat?
Nee. Local storage is browserspecifiek. Sla je data op in de ene browser, dan is die niet zichtbaar in een andere browser op hetzelfde apparaat. Elke browser heeft zijn eigen aparte local storage. Dat betekent dat een bezoeker die van de ene browser naar de andere overstapt zijn opgeslagen voorkeuren of data niet meeneemt.
Kunnen bezoekers hun local storage-data zien of verwijderen?
Ja. Iedereen kan de ontwikkelaarstools van zijn browser openen en de local storage-data van elke website bekijken of verwijderen. Bezoekers kunnen ook alle browserdata via hun browserinstellingen wissen, waarmee local storage volledig wordt leeggemaakt. Websites moeten local storage dus niet als permanente of gegarandeerde databron beschouwen.
Wat is het verschil tussen local storage en cookies?
Cookies worden bij elk verzoek naar de server teruggestuurd, waardoor ze geschikt zijn voor sessiebeheer en authenticatie. Local storage blijft alleen in de browser en wordt nooit automatisch naar de server gestuurd. Local storage bevat ook meer data dan cookies en heeft geen ingebouwde verlooptijd. Elk past bij andere toepassingen en goed gebouwde websites gebruiken beide op de juiste manier.
Beïnvloedt local storage de snelheid van een website?
Lezen uit en schrijven naar local storage is heel snel, dus het veroorzaakt zelden merkbare snelheidsproblemen. Local storage gebruiken om voorkeuren te cachen en serververzoeken te beperken, kan een website voor terugkerende bezoekers juist sneller laten aanvoelen. De invloed op websitesnelheid is over het algemeen positief als local storage verstandig wordt gebruikt.
Moet ik local storage op mijn website beheren?
Gebruik je een websitebouwer, dan beheert het platform local storage automatisch voor de functies die het ondersteunt. Je hoeft zelf niets te schrijven of in te stellen. De bouwer regelt alle voorkeuren of statusbeheer dat local storage gebruikt, achter de schermen. Bij de websitebouwer van WEMASY zit dit allemaal ingebouwd in hoe het platform werkt.