Så här använder du lokal lagring för JavaScript

Att skapa en schemalagd app är vanligtvis den första applikationen du lär dig att bygga i JavaScript men problemet med alla dessa appar är att när du laddar om sidan är alla de som är borta borta.

Det finns dock en enkel lösning, och det är att använda lokal lagring. Det bra med lokal lagring är att du kan spara dessa bitar av data till användarens dator så att när de laddar om sidan kommer alla deras todo fortfarande att finnas och lokal lagring är faktiskt ganska enkel när det gäller att spara data och göra den är tillgänglig på sidan.

Vad är lokal lagring?

Lokal lagring är en del av webblagring, som i sig ingår i HTML5-specifikationen. Det finns två alternativ för lagring av data i specifikationen:

• Lokal lagring: lagrar data utan förfallodatum och det här är det vi ska använda eftersom vi vill att våra behållare ska stanna på sidan så länge som möjligt.
• Session Storage: sparar endast data för en session, så om användaren stänger fliken och öppnar den igen kommer all data att vara borta.

I enkla termer är allt detta lagringsutrymme lagrat med namnet nyckel / värdepar lokalt och i motsats till cookies fortsätter dessa data även om du stänger webbläsaren eller stänger av datorn.

HTML

Om vi ​​tänker på en att göra-lista som vi behöver är:

• En inmatning för att placera vår uppgift.
• En inmatningsknapp för att lägga till vår handledning.
• En knapp för att rensa allt som görs.
• En platshållare oorderad lista där vår till-görs kommer att placeras i listobjekt.
• Och äntligen behöver vi en platshållare div för att visa en varning när du försöker skriva in en tom att göra.

Så vår HTML ska se ut så här:

  
      Clear All  
  
  

Det är en ganska vanlig platshållare HTML och med vårt javascript kan vi fylla allt detta med dynamiskt innehåll.

Eftersom vi ska använda jQuery i det här exemplet bör du även inkludera det i ditt HTML-dokument.

JavaScript

Om vi ​​tänker på strukturen för en enkel att göra app är det första vi behöver göra att kontrollera när användaren klickar på tilläggsknappen och kontrollera om ingången har ett tomt värde, som så:

$('#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;}

Allt vi gjorde var att kontrollera ett klick på add-knappen och kör ett enkelt test för att kontrollera om användaren fyllde inmatningen med något. Om inte, varnar divinen in och stannar i 1000ms och försvinner sedan. Slutligen återkommer vi falskt så att webbläsaren inte läser resten av manuset och ändå lägger till listobjektet.

Nästa sak som vi behöver göra är att infoga ett listobjekt med värdet i inmatningen och vi kommer att förbeställa det så att när användaren lägger till en göra gör det alltid att gå till början av listan och sedan spara det här listobjektet till lokal lagring, som så:

   // 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;});

Som du kan se är det ganska standard jQuery och när det gäller lokal lagring behöver vi spara en nyckel och ett värde. Nyckeln är ett namn vi ställde för oss själva, och i det här fallet kallade jag bara det "todos" och då måste vi ange vad vi faktiskt vill spara, och i det här fallet är det all HTML som placeras i todos oordnade lista . Som du kan se grepp vi bara att använda jQuery och vi återvände slutligen falska så att formuläret inte skickar in och vår sida laddar inte om.

Vårt nästa steg är att kontrollera om vi har något på lokal lagringsutrymme som redan sparats i vår maskin och om vi behöver placera det på sidan, så eftersom vi gav vår nyckel namnet todos måste vi kontrollera efter dess existens som så:

// if we have something on local storage place thatif(localStorage.getItem('todos')) {$('#todos').html(localStorage.getItem('todos'));}

Vi använde ett enkelt if-förklaring för att kontrollera och då fick vi bara det vi har på lokal lagring och placera det som HTML-dokumentet för den tilldelade listan.

Om du testar vår enkla app och vi laddar om sidan ser vi att den redan fungerar och allt vi har kvar är att skapa funktionen för när användaren väljer att rensa alla de som gör det; När det händer kommer vi att rensa allt lokalt lagringsutrymme, ladda om sidan för att våra ändringar träder i kraft och returnera sedan falskt för att förhindra att hash framför webbadressen som sådan:

// clear all the local storage$('#clear').click( function() {window.localStorage.clear();location.reload();return false;});

Med detta gjort har vi vår app fullt fungerande. Den fullständiga koden ser så här ut:

$('#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 (" 
  "+ Beskrivning +" 
  "); $ ('# form') [0] .reset (); var todos = $ ('# todos'). html (); localStorage.setItem ('todos', todos); return false;}); if (localStorage.getItem ( 'todos')) {$('#todos').html(localStorage.getItem('todos'));}  $ ('# clear'). klicka (funktion () {window.localStorage.clear (); location.reload (); return false;}); 

Webbläsarstöd

Stöd för webblagring är ganska bra för en HTML5-specifikation; Det stöds av alla större webbläsare och till och med IE8, så det enda du kanske behöver vara försiktig med är IE7 om du fortfarande stöder det.

Slutsats

Lokalt lagringsutrymme i små appar som detta kan mycket välkomna ersättare för databaser. Lagring av små mängder data behöver inte vara komplicerat.

Hur lagrar du data från JavaScript? Föredrar du cookies eller databaser till lokal lagring? Låt oss veta i kommentarerna.

Utvalda bild / miniatyrbild, lagringsbild via Shutterstock.