Web storage

Web storage (ook wel webopslag of browseropslag), voorheen DOM storage (DOM-opslag), is een standaard JavaScript-API die door webbrowsers wordt geleverd. Deze API stelt websites in staat om blijvend gegevens op apparaten van gebruikers op te slaan. Het systeem is vergelijkbaar met cookies, maar heeft een veel grotere capaciteit[1] en er wordt geen informatie verzonden in HTTP-headervelden.[2] Er zijn twee hoofdtypen web storage: lokale opslag en sessieopslag, die respectievelijk met persistente cookies en sessie-cookies te vergelijken zijn. Web storage is gestandaardiseerd door het World Wide Web Consortium (W3C)[3] en WHATWG,[4] en wordt ondersteund door alle belangrijke browsers.

Kenmerken

Web storage verschilt in een aantal belangrijke opzichten van cookies.

Doel

Cookies zijn bedoeld voor communicatie met servers; ze worden automatisch meegestuurd met alle pagina- of bestandsaanvragen en kunnen zowel door de server als door de browser worden benaderd. Web storage is daarentegen uitsluitend te gebruiken via scripts die in de browser van de gebruiker geladen en uitgevoerd worden (client-side-scripting). Gegevens in web storage worden niet bij elk HTTP-verzoek automatisch naar de server verzonden en een webserver kan niet rechtstreeks naar web storage schrijven. Toch kunnen deze twee effecten worden bereikt wanneer dit uitdrukkelijk zo in een client-side-script geprogrammeerd wordt, waardoor de interactie met de server fijn afgestemd kan worden.

Opslaggrootte

Cookies zijn beperkt tot 4 kilobyte. Web storage biedt een veel grotere opslagcapaciteit:

Lokale opslag en sessieopslag

Web storage biedt twee verschillende opslaggebieden, lokale opslag en sessieopslag, die verschillen in reikwijdte en levensduur. Gegevens in de lokale opslag worden per oorsprong (de combinatie van protocol, hostnaam en poortnummer zoals gedefinieerd in de same-origin policy) apart gehouden. De gegevens zijn beschikbaar voor alle scripts die geladen worden van pagina’s van dezelfde oorsprong die eerder de gegevens hebben opgeslagen en blijven bestaan nadat de browser is afgesloten. Daardoor lijdt web storage niet onder de integriteits- en vertrouwelijkheidsproblemen van cookies.[10] De sessieopslag wordt zowel per oorsprong als per browservenster of -tabblad apart gehouden en is beperkt tot de levensduur van het venster of tabblad. Sessieopslag is bedoeld om afzonderlijke exemplaren van dezelfde webapplicatie in verschillende vensters of tabbladen te laten draaien zonder dat ze elkaar storen. Die gebruikssituatie wordt namelijk niet goed ondersteund door cookies.[11]

Interface en gegevensmodel

De interface van web storage is beter te programmeren dan die van cookies, want bij web storage hoort een gegevensmodel met associatieve arrays waarbij zowel de sleutels als de waarden tekenreeksen zijn.

Gebruik

Browsers die web storage ondersteunen hebben de globale objecten sessionStorage en localStorage op het vensterniveau gedefinieerd. De volgende JavaScript-code kan in deze browsers worden gebruikt om web storage-gedrag te activeren:

// Waarde opslaan in browser voor de duur van de sessie
sessionStorage.setItem("key", "value");

// Waarde ophalen (wordt verwijderd wanneer de browser wordt gesloten en opnieuw geopend) ...
alert(sessionStorage.getItem("key"));

// Waarde opslaan in de browser voorbij de duur van de sessie
localStorage.setItem("key", "value");

// Waarde ophalen (blijft bestaan zelfs na sluiten en heropenen van de browser)
alert(localStorage.getItem("key"));

Alleen tekenreeksen kunnen worden opgeslagen via de Storage API.[12] Pogingen om een ander gegevenstype op te slaan leiden op de meeste browsers tot automatische omzetting in een tekenreeks. Het omzetten naar JSON maakt echter een effectieve opslag van JavaScript-objecten mogelijk.

// Object opslaan in plaats van een string
localStorage.setItem("key", {name: "value"});
alert(typeof localStorage.getItem('key')); // string

// Een geheel getal opslaan in plaats van een string
localStorage.setItem("key", 1);
alert(typeof localStorage.getItem("key")); // string

// Object opslaan met JSON
localStorage.setItem("key", JSON.stringify({name: "value"}));
alert(JSON.parse(localStorage.getItem("key")).name); // value

Naamgeving

De W3C-ontwerpnorm draagt de titel "Web Storage". "DOM storage" is ook een vaak gebruikte naam geweest, hoewel steeds minder; zo zijn bijvoorbeeld de webartikelen "DOM Storage" van de ontwikkelaarsites van Mozilla en Microsoft vervangen door artikelen onder de naam "Web Storage".[13][14][15][16]

De letters "DOM" in DOM-opslag verwijzen niet letterlijk naar het Document Object Model. Volgens het W3C: "De term DOM wordt gebruikt om te verwijzen naar de API-set die beschikbaar is gemaakt voor scripts in webapplicaties, en impliceert niet per se het bestaan van een daadwerkelijk Document-object..."[17]

Beheer

De opslag van web storage-objecten is standaard ingeschakeld in huidige versies van alle ondersteunende webbrowsers, waarbij browserleveranciers manieren bieden voor gebruikers om web storage in- of uit te schakelen, of de web storage-"cache" te wissen. Vergelijkbare bedieningsmogelijkheden voor web storage zijn ook beschikbaar via externe browseruitbreidingen. Elke browser slaat web storage-objecten op een andere manier op:

  • Firefox slaat web storage-objecten op in een SQLite-bestand genaamd webappsstore.sqlite in de profielmap van de gebruiker. [18]
  • Google Chrome registreert web storage-gegevens in een SQLite-bestand in het gebruikersprofiel. De submap waarin dit bestand staat is \AppData\Local\Google\Chrome\User Data\Default\Local Storage op Windows, en ~/Library/Application Support/Google/Chrome/Default/Local Storage op macOS.
  • De web storage van Opera bevindt zich in \AppData\Roaming\Opera\Opera\sessions\autosave.win of \AppData\Local\Opera\Opera\pstorage\ afhankelijk van de versie van Opera.
  • De web storage van Internet Explorer bevindt zich in \AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage.
  • De web storage van Safari bevindt zich in een map met het label LocalStorage binnen een verborgen safari-map. [19]

Referenties

  1. 1 2 Web Storage: Easier, More Powerful Client-Side Data Storage. Dev.Opera (5 maart 2013). Geraadpleegd op 14 mei 2021.
  2. ↑ localStorage is not cookies. andyhume.net (24 maart 2011). Gearchiveerd op 2 juni 2011. Geraadpleegd op 14 mei 2021.
  3. ↑ Web Storage (Second Edition). W3C. Web Platform Working Group (28 januari 2021). Geraadpleegd op 14 mei 2021.
  4. ↑ WHATWG, HTML Standard § 12 Web storage. html.spec.whatwg.org. Geraadpleegd op 14 mei 2021.
  5. ↑ Working with quota on mobile browsers: A research report on browser storage - HTML5 Rocks. Gearchiveerd op 1 februari 2014. Geraadpleegd op 4 mei 2021.
  6. ↑ Storage quotas and eviction criteria - Web APIs | MDN. developer.mozilla.org (13 March 2025). Geraadpleegd op 28 april 2025. “Web storage, dat toegankelijk is via de eigenschappen localStorage en sessionStorage van het window-object, is beperkt tot maximaal 10 MiB gegevens op alle browsers. Browsers kunnen tot 5 MiB lokale opslag en 5 MiB sessieopslag per oorsprong bewaren.”
  7. ↑ John Resig: DOM Storage. John Resig, ejohn.org. Geraadpleegd op 2011-06-12.
  8. ↑ michaeln, Issue 21680002: Up the window.localstorage limit to 10M from 5M. - Code Review. Chromium Code Reviews (8 maart 2013). Geraadpleegd op 14 mei 2021.
  9. ↑ Microsoft, Introduction to Web Storage. Microsoft Docs. Microsoft (20 oktober 2016). Geraadpleegd op 14 mei 2021.
  10. ↑ Zie RFC 6265 secties 8.5 en 8.6 voor meer over de integriteits- en vertrouwelijkheidsproblemen van cookies.
  11. ↑ W3C: Web Storage draft standard. Gearchiveerd op 2011-06-12 op de Wayback Machine. Dev.w3.org (2004-02-05). Geraadpleegd op 2011-06-12.
  12. ↑ W3C, 2011 http://dev.w3.org/html5/webstorage/ Gearchiveerd 2011-02-01 op de Wayback Machine
  13. ↑ DOM Storage. Mozilla Developer Network. Gearchiveerd op June 4, 2011. Geraadpleegd op 12 juni 2011.
  14. ↑ Web Storage API. Mozilla Developer Network. Geraadpleegd op June 28, 2017.
  15. ↑ Introduction to DOM Storage. Microsoft Developer Network. Gearchiveerd op June 8, 2011. Geraadpleegd op 12 juni 2011.
  16. ↑ Introduction to Web Storage. Microsoft Developer Network. Geraadpleegd op June 28, 2017.
  17. ↑ W3C: Web Storage draft standard Gearchiveerd 2011-02-01 op de Wayback Machine. Dev.w3.org (2004-02-05). Geraadpleegd op 2011-06-12.
  18. ↑ Webappsstore.sqlite kb.mozillazine.org
  19. ↑ Where is Safari web data stored? discussions.apple.com. Geraadpleegd op 2022-10-06

Externe koppelingen

Dit artikel is uitgegeven door Wikipedia. De tekst is beschikbaar onder Creative Commons Attribution-Share Alike 4.0, tenzij anders vermeld. Voor de mediabestanden kunnen aanvullende voorwaarden gelden.