Sådan bruges lokal lagring til JavaScript

Oprettelse af en skræddersyet app er som regel den første applikation, du lærer at bygge i JavaScript, men problemet med alle disse apps er, at når du genindlæser siden, er alle de to-do'er væk.

Der er dog en simpel løsning, og det er at bruge lokal opbevaring. Det gode ved lokal opbevaring er, at du kan gemme disse bits data til brugerens computer, så når de genindlæser siden, vil alle deres todo stadig være der, og lokal opbevaring er faktisk ret simpelt, når det kommer til at gemme dataene og lave den er tilgængelig på siden.

Hvad er lokal opbevaring?

Lokal opbevaring er en del af weblagring, som selv er en del af HTML5-specifikationen. Der er to muligheder for lagring af data i specifikationen:

• Lokal opbevaring: Gemmer data uden udløbsdato, og det er det, vi vil bruge, fordi vi vil have vores to-do's at blive på siden så længe som muligt.
• Session Storage: gemmer kun data for en session, så hvis brugeren lukker fanen og genåbner det, vil alle deres data være væk.

Simpelthen er alt det, der gøres på internettet, gemt nøgle / værdi par lokalt og i modsætning til cookies fortsætter disse data, selvom du lukker din browser eller slukker computeren.

HTML'en

Hvis vi tænker på en to-do liste, hvad vi har brug for er:

• Et input til at placere vores gør.
• En indtastningsknap for at tilføje vores opgave.
• En knap for at rydde alle de to-do's.
• En placeholder uordnet liste, hvor vores to-do's vil blive placeret i listeposter.
• Og endelig har vi brug for en placeholder div til at vise en advarsel, når du forsøger at indtaste en tom for at gøre.

Så vores HTML skal se sådan ud:

  
      Clear All  
  
  

Det er en smuk standardplacerings HTML, og med vores javascript kan vi udfylde alt dette med dynamisk indhold.

Da vi bruger jQuery i dette eksempel, skal du også medtage det i dit HTML-dokument.

JavaScript

Hvis vi tænker på strukturen af ​​en simpel at-gøre app, er det første, vi skal gøre, at kontrollere, hvornår brugeren klikker på add-knappen, og kontrollere om indgangen har en tom værdi, som sådan:

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

Alt vi gjorde var at kontrollere et klik på add-knappen og køre en simpel test for at kontrollere, om brugeren fyldte indgangen med noget. Hvis ikke, falder advarselsdivmen ind og forbliver i 1000ms og dør derefter ud. Endelig vender vi tilbage falsk, så browseren ikke læser resten af ​​scriptet og stadig tilføjer listen element.

Den næste ting, vi skal gøre, er at indsætte et listeobjekt med værdien i input, og vi vil udfylde dette, så når brugeren tilføjer en opgave, går det altid til begyndelsen af ​​listen og gemmer derefter det pågældende objekt til lokal opbevaring, som sådan:

   // 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, er det ret standard jQuery, og når det kommer til lokal opbevaring, skal vi gemme en nøgle og en værdi. Nøglen er et navn, vi sætter for os selv, og i dette tilfælde har jeg lige kaldt det 'todos' og så skal vi angive, hvad vi faktisk vil gemme, og i dette tilfælde er det hele HTML'en, der er placeret inden for todos uordnede liste . Som du kan se, greb vi bare ved at bruge jQuery, og vi vendte endelig tilbage falske, så formularen ikke sender, og vores side genindlæses ikke.

Vores næste skridt er at kontrollere, om vi har noget på lokalt lager, der allerede er gemt i vores maskine, og hvis vi gør det, skal vi placere det på siden, så da vi gav vores nøgle navnet todos, skal vi kontrollere for dets eksistens som sådan:

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

Vi brugte en simpel, hvis erklæring til at kontrollere, og så fik vi kun det, vi har på lokal opbevaring, og placerer det som HTML-filen på den ikke-ordnede liste.

Hvis du tester vores enkle app, og vi genindlæser siden, ser vi, at den allerede virker, og alt, hvad vi har forladt, er at skabe funktionen, når brugeren vælger at rydde alle de to-do's; Når det sker, vil vi rydde alt lokalt lager, genindlæse siden, for vores ændringer træder i kraft, og returner derefter falsk for at forhindre hash foran url som sådan:

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

Med dette gjort har vi vores app fuldt fungerende. Den fulde kode ser sådan ud:

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

Browser support

Støtten til weblagring er ret godt for en HTML5-specifikation; det understøttes af alle de store browsere og endda IE8, så det eneste du måske skal være forsigtigt med er IE7, hvis du stadig støtter det.

Konklusion

Lokal opbevaring i små apps som dette kan meget velkomment erstatte databaser. Lagring af små mængder data behøver ikke at være kompleks.

Hvordan gemmer du data fra JavaScript? Foretrækker du cookies eller databaser til lokal opbevaring? Lad os vide i kommentarerne.

Fremhævet billede / miniaturebillede, lagringsbillede via Shutterstock.