JavaScript (vaak afgekort als JS) is een van de fundamenten van de moderne webinfrastructuur. Het is een lichtgewicht, geïnterpreteerde, objectgeoriënteerde programmeertaal die first-class functies ondersteunt. JavaScript is vooral bekend om zijn implementatie in dynamische webpagina's. Vanwege de functies ervan wordt JavaScript echter ook gebruikt in omgevingen buiten de browser.
In deze gids bespreken we in detail twee JavaScript-objecten: localStorage en sessionStorage.
Overzicht van localStorage en sessionStorage
De objecten localStorage en sessionStorage worden aangeboden als onderdeel van de web storage API. Het is een geweldig hulpmiddel voor lokale opslag van sleutel-waarde-paren. Het gebruik van localStorage en sessionStorage is een geweldig alternatief voor cookies. Deze aanpak biedt enkele extra voordelen:
- Gegevens worden lokaal opgeslagen en kunnen niet door de server worden gelezen. Dit elimineert de beveiligingsproblemen met cookies.
- Het maakt een hogere opslagcapaciteit mogelijk (tot 10 MB voor de meeste moderne browsers).
- Eenvoudige en duidelijke syntaxis.
Deze objecten worden ondersteund op alle moderne webbrowsers, dus er zal geen probleem zijn met browsercompatibiliteit. Cookies zijn in veel situaties nog steeds nuttig, bijvoorbeeld voor authenticatie. Er zijn echter situaties waarin localStorage en sessionStorage betere oplossingen bieden.
Vereisten
Om de stappen in deze handleiding uit te voeren, heeft u de volgende componenten nodig:
- Een correct geconfigureerde Linux-server. Deze gids demonstreert het opzetten van uw eigen Ubuntu-server op CloudSigma.
- Node.js als de JavaScript-runtime. Lees hier meer over het installeren van Node.js op Ubuntu.
- Een moderne webbrowser, bijvoorbeeld Google Chrome of Firefox.
Ter demonstratie hebben we een voorbeeldwebpagina genomen met een bijgevoegd JS-script. U kunt hier meer lezen over het toevoegen van JavaScript aan een HTML-bestand:
Wat betreft de teksteditor zullen we gebruikmaken van Visual Studio Code:
Wat is het verschil tussen localStorage en sessionStorage?
Zowel localStorage en sessionStorage zijn afkomstig van dezelfde API. Hun gedrag is ook identiek. Het enige verschil is de manier waarop elk object gegevenspersistentie toestaat. In het geval van sessionStorage, blijven de gegevens behouden totdat het venster of tabblad wordt gesloten. Met localStorage, blijven de gegevens behouden totdat de browsercache wordt gewist of de web-app deze wist.
In deze handleiding zullen we ons voornamelijk richten op localStorage. De syntaxis voor sessionStorage is echter hetzelfde. We zullen laten zien hoe u sleutel/waarde-paren kunt maken, lezen en bijwerken met behulp van localStorage.
Stap 1 – Items aanmaken
We kunnen een item declareren in het localStorage object met behulp van setItem(). Deze methode accepteert twee argumenten: de sleutel en de bijbehorende waarde. De structuur van de methode is als volgt:
|
1 |
localStorage.setItem(<sleutel>, <waarde>) |
In het volgende voorbeeld hebben we een variabele key gemaakt. Met behulp van de setItem() methode hebben we een nieuwe sleutel ingesteld en de waarde ervan ingesteld op ‘waarde’:
|
1 2 |
let key = 'item_1'; localStorage.setItem(key, 'value'); |
Stap 2 – Items lezen
Hoe lezen we nu de waarde die in de sleutel is opgeslagen? Om een sleutel op te halen uit localStorage, gebruiken we de methode getItem(). Deze accepteert de naam van de sleutel en retourneert de waarden die in de sleutel zijn opgeslagen. We gebruiken de alert() methode om de opgehaalde inhoud weer te geven:
|
1 2 |
let myItem = localStorage.getItem(key); alert(myItem); |
Open vervolgens de webpagina in een webbrowser. Deze zou de waarde moeten tonen die is opgeslagen in de sleutel:
Stap 3 – Items bijwerken
Zodra een waarde is ingesteld, blijft deze zo tenzij deze wordt gewijzigd. Als we de setItem() op dezelfde sleutel opnieuw gebruiken, zal deze automatisch de oude waarde vervangen door de nieuwe.
In het volgende voorbeeld wordt de sleutel eerst geïnitieerd met de waarde ‘waarde’. In de volgende regel hebben we setItem() nogmaals aangeroepen en de waarde ingesteld op ‘nieuwe waarde’:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.setItem(key, 'new value'); let myItem = localStorage.getItem(key); alert(myItem); |
Laten we kijken wat er gebeurt als we deze code in de browser uitvoeren:
Zoals we kunnen zien, is de waarde van de key ingesteld op ‘nieuwe waarde’.
Stap 4 – Items verwijderen
Als er meerdere items in de localStorage (en sessionStorage eveneens) die niet langer nodig zijn, is het aanbevolen om deze achteraf te wissen. Dit maakt meer ruimte vrij voor later gebruik. De app wordt hierdoor ook geheugenefficiënter.
Om een item te verwijderen uit localStorage, is er een speciale methode removeItem(). Deze neemt de key aan als argument en verwijdert deze uit de localStorage datapool:
|
1 |
localStorage.removeItem(<key_to_remove>) |
Laten we dit implementeren in ons script:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.removeItem(key); let myItem = localStorage.getItem(key); alert(myItem); |
Bij uitvoering geeft de uitvoer null aan omdat er geen waarde bestaat voor de key:
Stap 5 – Items wissen
In het vorige voorbeeld hebben we slechts één key verwijderd. Echter, localStorage maakt het mogelijk om alle opgeslagen items in één stap te wissen. Om alle items te wissen, localStorage biedt de methode clear(). Deze accepteert geen argument:
|
1 |
localStorage.clear(); |
Breng de methode in de praktijk:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.clear(); let myItem = localStorage.getItem(key); alert(myItem); |
Net als voorheen verwijdert het alle items uit localStorage, dus wanneer je probeert toegang te krijgen tot de key-waarde, retourneert het null:
Stap 6 – Werken met JSON
-
Objecten en arrays opslaan
De localStorage en sessionStorage -objecten kunnen alleen stringwaarden opslaan. Er zullen echter momenten zijn waarop je met objecten of arrays moet werken. In dat geval moeten we ze converteren naar een string.
JavaScript wordt geleverd met de functie JSON.stringify() die de array/het object neemt en converteert naar strings. Dit bericht geeft een snel overzicht van het JSON-formaat. Voor een meer gedetailleerde handleiding kun je JSON in JavaScript.
In dit voorbeeld hebben we een object gemaakt sampleObj met twee velden name en location. We zullen dit converteren naar een string en opslaan in de key:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = localStorage.getItem(key); alert(myItem); |
Hier is de uitvoer de string die de gegevens van het object bevat:
-
Objecten en arrays lezen
Bij het opslaan hebben we objecten en arrays geconverteerd naar strings. We kunnen deze string ook weer converteren naar het oorspronkelijke formaat. Hiervoor gebruiken we de methode JSON.parse(). Deze accepteert een string en converteert deze terug naar het JSON-formaat:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = JSON.parse(localStorage.getItem(key)); alert(JSON.stringify(myItem, null, " ")); |
Wat betreft de uitvoer, we hebben deze opnieuw geconverteerd naar een string en geformatteerd voor een betere weergave:
Stap 7 – Controleren op item in localStorage
In dit gedeelte laten we een eenvoudige test zien om te bepalen of localStorage en sessionStorage wel of geen items bevatten. Met een eenvoudig if-statement kunnen we de lengte controleren van localStorage of sessionStorage. Als er items zijn, is de lengte groter dan 0.
Implementeer eerst het volgende voorbeeld:
|
1 2 3 4 5 6 7 8 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ alert('true'); } else{ alert('false'); } |
Hier zal de uitvoer ‘true’ zijn, omdat er één sleutel bestaat in localStorage:
Stap 8 – Itereren over items
De localStorage en sessionStorage-objecten slaan de sleutels op in een array-achtige structuur. Ze ondersteunen de forEach-methode niet, dus we moeten de klassieke techniek volgen van het gebruiken van een for-lus om over elk item te itereren.
In het volgende voorbeeld controleren we of localStorage leeg is of niet. Als het niet leeg is, itereren we over elk item:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ for(i = 0; i < localStorage.length; i++){ let key = localStorage.key(i); let myItem = localStorage.getItem(key); alert(key); } } else{ alert('false'); } |
De uitvoer toont alle items één voor één:
Stap 9 – Browserondersteuning controleren
We kunnen de ondersteuning voor localStorage (en sessionStorage) controleren door te kijken of het beschikbaar is op het window-object. Een eenvoudig if-statement is voldoende:
|
1 2 3 4 5 6 |
if(window.localStorage){ alert(true); } else{ alert(false); } |
Voer de code uit in de webbrowser:
Laatste gedachten
In deze handleiding is gedemonstreerd hoe u localStorage en sessionStorage -objecten in JavaScript kunt gebruiken om sleutel/waarde-paren in de browser op te slaan. De syntaxis is veel eenvoudiger om mee te werken. We hebben laten zien hoe u sleutel/waarde-paren kunt maken, verwijderen en bijwerken. We hebben ook het opslaan van objecten en arrays behandeld door ze om te zetten in strings (en vice versa).
Om uw kennis van JavaScript verder te verdiepen, kunt u de volgende handleidingen bekijken op onze blog:
- Basisprincipes van JavaScript: werken met datum en tijd
- JavaScript: een handleiding over het indexeren, splitsen en manipuleren van strings
- Werken met JavaScript: hoe klassen werken
- Werken met JavaScript: hoe prototypen en overervingen werken
Veel programmeerplezier!
Reacties
Nog geen reacties. Wees de eerste.