web2 logo

Artikel Links Notities

HTML web storage API

Met web storage kunnen gegevens lokaal worden opgeslagen in de browser van de gebruiker. De beschikbare opslagruimte bij web storage is groter (minimaal 5mb) als bij cookies en de gegevens worden alleen lokaal opgeslagen, ze worden niet naar de webserver gestuurd. Web storage is per oorsprong (per domein en protocol). Alle paginas van dezelfde oorsprong hebben toegang tot deze gegevens.

HTML Web Storage Objecten

Met HTML web storage zijn er twee objecten beschikbaar voor het lokaal opslaan van gegevens: window.localStorage - zonder verloopdatum window.sessionStorage - alleen voor de huidige sessie Voordat je web storage gebruikt, kan je eerst controleren of de browser dit ondersteund: if (typeof(Storage) !== "undefined") { // Code voor localStorage/sessionStorage. } else { // Sorry! Geen Web Storage support. } of: if (window.localStorage) { // Browser ondersteund localStorage } else { // Geen localStorage support } Een reden voor het niet ondersteunen van web storage kan ook zijn het gebruik van een anonieme browsersessie via 'Incognito' of 'Private Browsing'.

Het localStorage Object

Het localStorage object slaat gegevens op zonder verloopdatum. De gegevens blijven bewaard als de browser wordt gesloten. De gegevens kunnen alleen gewist worden via Javascript of via het legen van de Browser cache / Locally Stored Data.

Opslaan

// Opslaan: "Smit" wordt opgalsgen als achternaam localStorage.setItem("achternaam", "Smit"); // Een andere notatie is ook nog mogelijk, maar wordt niet aangeraden: localStorage.achternaam = "Smit";

Ophalen

// Ophalen achternaam "Smit" wordt opgehaald en opgeslagen in resultaat document.getElementById("resultaat").innerHTML = localStorage.getItem("achternaam"); // Een andere notatie is ook mogelijk, maar wordt niet aangeraden: document.getElementById("resultaat").innerHTML = localStorage.achternaam;

Verwijderen

// localStorage item “achternaam” verwijderen kan met: localStorage.removeItem("achternaam"); // De hele opslag leegmaken (alle items verwijderen): localStorage.clear();

Aantal

// het aantal items in de storage opvragen kan met: localStorage.length;

JSON

De naam/waarde paren worden altijd opgeslagen als strings. Als je een ander formaat nodig hebt, dan moet je ze eerst omzetten. Om een object als string op te slaan kan je JSON gebruiken. Gebruik JSON.stringify() en JSON.parse(): var persoon = { Naam: 'Jan Smit', Leeftijd: 26, Nationaliteit: 'Nederlandse' } // opslaan localStorage.setItem('persoon', JSON.stringify(persoon)); // ophalen JSON.parse(localStorage.getItem('persoon')); Het volgende voorbeeld telt het aantal maal dat een gebruiker op een knop heeft geklikt. De waarde string wordt hier omgezet naar een nummer om de teller te kunnen verhogen. Voorbeeld: if (localStorage.klikteller) { localStorage.klikteller = Number(localStorage.klikteller ) + 1; } else { localStorage.klikteller = 1; } document.getElementById("resultaat").innerHTML = "Je hebt " + localStorage.klikteller + " keer op de knop geklikt.";

Het sessionStorage Object

Het sessionStorage object is gelijk aan het localStorage object, echter nu worden de gegevens gewist zodra de browser tab wordt gesloten.

Fout afvangen

De QUOTA_EXCEEDED_ERR fout krijg je als de maximale opslagruimte overschreden wordt. Dit kan je afvangen met een try/catch blok om de gebruiker te waarschuwen. Voorbeeld: try { localStorage.setItem('naam', 'Jan Smit'); } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert('Opslag is vol'); } }

Alle opgeslagen waarden opvragen

Een methode is om de localStorage te doorlopen zoals een array: for(let i=0; i<localStorage.length; i++) { let key = localStorage.key(i); alert(`${key}: ${localStorage.getItem(key)}`); } Via een for key in localStorage loop kan het ook, maar dan moet er gefilterd worden om ingebouwde velden over te slaan: for(let key in localStorage) { if (!localStorage.hasOwnProperty(key)) { continue; // items zoals "setItem", "getItem" overslaan } alert(`${key}: ${localStorage.getItem(key)}`); } Een andere mehode is via Object.keys: let keys = Object.keys(localStorage); for(let key of keys) { alert(`${key}: ${localStorage.getItem(key)}`); } Het is ook mogelijk om het hele storage object in een JSON object te plaatsen: alert( JSON.stringify(localStorage, null, 2) );

Storage event

Zodra gegevens aangepast worden in localStorage of sessionStorage, wordt er een storage event getriggered met deze eigenschappen:

key
nummer van de sleutel die is aangepast (null indien .clear() werd aangeroepen).
oldValue
de oude waarde (null indien een nieuwe sleutel werd toegevoegd).
newValue
de nieuwe waarde (null indien de sleutel werd verwijderd).
url
de url van het document waar de aanpassing gebeurde.
storageArea
ofwel het localStorage of het sessionStorage object waar de aanpassing gebeurde.

Belangrijk is dat het event wordt getriggerd op alle window objecten waar de opslag toegankelijk is, behalve op het window object dat de oorzaak is. Als je twee windows hebt met in ieder dezelfde site, dan wordt de localStorage tussen die twee gedeeld. Als beiden luisteren naar window.onstorage, dan kan ieder window reageren op wat er in het andere window gebeurd. // wordt getriggerd op aanpassingen op dezelfde opslag gemaakt via andere documenten window.onstorage = event => {//zelfde als window.addEventListener('storage', () => { if (event.key != 'now') return; alert(event.key + ':' + event.newValue + " at " + event.url); }; localStorage.setItem('now', Date.now());

De inhoud van een invoerveld automatisch bewaren

Als een gebruiker per ongeluk de tab sluit, blijft de inhoud van het veld toch bewaard: !doctype html textarea style="width:200px; height: 60px;" id="area" placeholder="je tekst hier"/textarea br button onclick="localStorage.removeItem('area');area.value=''"Leeg maken/button script area.value = localStorage.getItem('area'); area.oninput = () => { localStorage.setItem('area', area.value) }; /script

naar boven

term zoeken

Notitieruimte