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 en er wordt geen informatie verzonden in HTTP-headervelden. 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) en WHATWG, 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: Opera 10.50+ staat 5 MB toe Safari 8 staat 5 MB toe Firefox staat 10 MB toe (voorheen 5 MB per oorsprong in 2007John Resig: DOM Storage. John Resig, ejohn.org. Geraadpleegd op 2011-06-12.) Google Chrome staat 10 MB per oorsprong toe (voorheen 5 MB per oorsprong) Internet Explorer staat 10 MB per opslaggebied toe
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.Zie secties 8.5 en 8.6 voor meer over de integriteits- en vertrouwelijkheidsproblemen van cookies. 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.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.
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.W3C, 2011 https://web.archive.org/web/20110201152609/http://dev.w3.org/html5/webstorage/ Gearchiveerd 2011-02-01 op de Wayback Machine 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".
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..."W3C: Web Storage draft standard Gearchiveerd 2011-02-01 op de Wayback Machine. Dev.w3.org (2004-02-05). Geraadpleegd op 2011-06-12.
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. Webappsstore.sqlite kb.mozillazine.org 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. Where is Safari web data stored? discussions.apple.com. Geraadpleegd op 2022-10-06
Referenties
Externe koppelingen HTML Living Standard 11 Web storage W3C: Web Storage Web Storage API op Mozilla Developer Network Opera: Web Storage: easier, more powerful client-side data storage Local Storage op BlackBerry DevZone
Categorie:W3C-standaard Categorie:JavaScript