Het maken van een taken-app is meestal de eerste applicatie die je leert bouwen in JavaScript, maar het probleem met al die apps is dat wanneer je de pagina herlaadt, al die taken verdwenen zijn.
Er is echter een eenvoudige oplossing en dat is om lokale opslag te gebruiken. Het goede aan lokale opslag is dat je die stukjes gegevens op de computer van de gebruiker kunt opslaan, zodat wanneer ze de pagina opnieuw laden, al hun taken nog steeds aanwezig zijn en lokale opslag eigenlijk vrij eenvoudig is als het gaat om het opslaan van de gegevens en het maken van het beschikbaar op de pagina.
Lokale opslag is een onderdeel van webopslag, dat zelf deel uitmaakt van de HTML5-specificatie. Er zijn twee opties voor het opslaan van gegevens in de specificatie:
Eenvoudig gezegd, alles wat webopslag doet, is sleutel / waarde-paren met een nieuwe naam opslaan en in tegenstelling tot cookies blijven deze gegevens bestaan, zelfs als u uw browser sluit of uw computer uitschakelt.
Als we nadenken over een takenlijst, dan is wat we nodig hebben:
Dus onze HTML zou er ongeveer zo uit moeten zien:
Het is een vrij standaard tijdelijke aanduiding-HTML en met ons javascript kunnen we dit allemaal opvullen met dynamische inhoud.
Aangezien we jQuery in dit voorbeeld gebruiken, moet u het ook in uw HTML-document opnemen.
Als we nadenken over de structuur van een eenvoudige taak, is het eerste wat we moeten doen, controleren wanneer de gebruiker op de knop Toevoegen klikt en controleren of de invoer een lege waarde heeft, zoals:
$('#add').click( function() {var Description = $('#description').val();//if the to-do is emptyif($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;}We hebben alleen gekeken of er een klik op de knop Toevoegen was en een eenvoudige test uitvoeren om te controleren of de gebruiker de invoer met iets vulde. Als dat niet het geval is, verdwijnt de waarschuwingsdeler en blijft hij 1000 ms staan en vervaagt vervolgens. Ten slotte retourneren we false, zodat de browser de rest van het script niet leest en toch het lijstitem toevoegt.
Het volgende dat we moeten doen is een lijstitem invoegen met de waarde in de invoer en we zullen dit toevoegen zodat wanneer de gebruiker een taak toevoegt, deze altijd naar het begin van de lijst gaat en dan dat lijstitem opslaat om lokale opslag, zoals zo:
// add the list item$('#todos').prepend("" + Description + " ");// delete whatever is in the input$('#form')[0].reset();var todos = $('#todos').html();localStorage.setItem('todos', todos);return false;});Zoals je ziet is het behoorlijk standaard jQuery en als het gaat om lokale opslag moeten we een sleutel en een waarde opslaan. De sleutel is een naam die we voor onszelf hebben ingesteld en in dit geval heb ik het gewoon 'todos' genoemd en dan moeten we specificeren wat we eigenlijk willen opslaan, en in dit geval is dat alle HTML die in de ongeordende lijst met todos is geplaatst . Zoals u kunt zien, hebben we dat met jQuery gepakt en zijn we uiteindelijk false teruggestuurd, zodat het formulier niet wordt ingediend en onze pagina niet opnieuw wordt geladen.
Onze volgende stap is om te controleren of we iets op de lokale opslag al in onze machine hebben opgeslagen en als dat zo is, moeten we dat op de pagina plaatsen, dus omdat we onze sleutel de naam todos hebben gegeven, moeten we controleren of het zo is:
// if we have something on local storage place thatif(localStorage.getItem('todos')) {$('#todos').html(localStorage.getItem('todos'));}We gebruikten een eenvoudige if-instructie om te controleren en vervolgens hebben we alleen gekregen wat we hebben op lokale opslag en plaatsen die als de HTML van de ongeordende lijst van de taak.
Als u onze eenvoudige app test en we herladen de pagina, zien we dat deze al werkt en het enige wat we nog hebben is om de functie te maken voor wanneer de gebruiker ervoor kiest om alle taken te wissen; wanneer dat gebeurt, verwijderen we alle lokale opslag, herladen we de pagina voor onze wijzigingen worden van kracht en retourneren we false om de hash voor de URL te voorkomen zoals:
// clear all the local storage$('#clear').click( function() {window.localStorage.clear();location.reload();return false;});Met dit gedaan hebben we onze app volledig werken. De volledige code ziet er als volgt uit:
$('#add').click( function() {var Description = $('#description').val();if($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;} $ ( '# Todos'). Prepend (" "+ Beschrijving +" "); $ ('# formulier') [0] .reset (); var todos = $ ('# todos'). html (); localStorage.setItem ('todos', todos); return false;}); if (localStorage.getItem ( 'todos')) {$('#todos').html(localStorage.getItem('todos'));} $ ('# clear'). klik (functie () {window.localStorage.clear (); location.reload (); return false;}); De ondersteuning voor webopslag is redelijk goed voor een HTML5-specificatie; het wordt ondersteund door alle grote browsers en zelfs IE8, dus het enige waar je misschien op moet letten is IE7 als je dat nog steeds ondersteunt.
Lokale opslag in kleine apps als deze kan zeer welkom zijn als alternatief voor databases. Het opslaan van kleine hoeveelheden gegevens hoeft niet ingewikkeld te zijn.
Hoe bewaar je gegevens uit JavaScript? Geeft u de voorkeur aan cookies of databases voor lokale opslag? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, opslag afbeelding via Shutterstock.