Slik bruker du lokal lagring for JavaScript

Å lage en oppgave er vanligvis det første programmet du lærer å bygge i JavaScript, men problemet med alle disse programmene er at når du laster opp siden, er alle de to-do-erene borte.

Det er imidlertid en enkel løsning, og det er å bruke lokal lagring. Det gode ved lokal lagring er at du kan lagre disse bitene til brukerens datamaskin slik at når de laster opp siden, vil alle deres todo fortsatt være der, og lokal lagring er faktisk ganske enkelt når det gjelder å lagre dataene og lage den er tilgjengelig på siden.

Hva er lokal lagring?

Lokal lagring er en del av nettlagring, som i seg selv er en del av HTML5-spesifikasjonen. Det er to alternativer for lagring av data i spesifikasjonen:

• Lokal lagring: Lagrer data uten utløpsdato, og dette er det vi skal bruke fordi vi vil at våre gjøremål skal være på siden så lenge som mulig.
• Session Storage: lagrer bare dataene for en økt, så hvis brukeren lukker fanen og gjenåpner det, vil alle dataene være borte.

Enkelt sagt, alt det nettoppslaget gjør er butikk som heter nøkkel / verdi par lokalt og i motsetning til informasjonskapsler, fortsetter disse dataene, selv om du lukker nettleseren eller slår av datamaskinen.

HTML-koden

Hvis vi tenker på en oppgaveliste, er det vi trenger:

• En innsats for å plassere vår gjøremål.
• En inngangsknapp for å legge til vår gjøremål.
• En knapp for å rydde alle oppgavene.
• En plassholder uordnet liste der våre gjøremål vil bli plassert i listeposter.
• Og til slutt trenger vi en plassholder div for å vise et varsel når du prøver å legge inn en tom for å gjøre.

Så vår HTML skal se slik ut:

  
      Clear All  
  
  

Det er en ganske vanlig plassholder HTML og med vårt javascript kan vi fylle alt dette opp med dynamisk innhold.

Siden vi skal bruke jQuery i dette eksemplet, bør du også inkludere det i HTML-dokumentet ditt.

JavaScript

Hvis vi tenker på strukturen til en enkel å gjøre app, er det første som må gjøres, å sjekke når brukeren klikker på add-knappen og kontroller om inngangen har en tom verdi, slik som:

$('#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 å se etter et klikk på add-knappen og utfør en enkel test for å sjekke om brukeren fyllte innspillet med noe. Hvis ikke, forsvinner varslingsdivisjonen og forblir i 1000 ms og fades deretter ut. Til slutt returnerer vi falske slik at nettleseren ikke leser resten av skriptet og fremdeles legger til listeelementet.

Den neste tingen vi trenger å gjøre er å sette inn en liste med verdien i innspillingen, og vi vil prepend dette slik at når brukeren legger til en oppgave, går det alltid til begynnelsen av listen og deretter lagrer det listeposten til lokal lagring, slik som:

   // 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 ganske vanlig jQuery, og når det gjelder lokal lagring, må vi lagre en nøkkel og en verdi. Nøkkelen er et navn vi har satt for oss selv, og i dette tilfellet har jeg nettopp kalt det 'todos' og da må vi spesifisere hva vi egentlig vil lagre, og i dette tilfellet er det all HTML som er plassert i todos uordnet liste . Som du kan se, grep vi nettopp med jQuery, og vi returnerte endelig falsk, slik at skjemaet ikke sender inn, og siden vår laster ikke opp.

Vårt neste skritt er å sjekke om vi har noe på lokal lagringsplass som allerede er lagret i vår maskin, og hvis vi gjør det, må vi plassere det på siden, så siden vi ga nøkkelen navnet vårt, må vi sjekke for eksistensen som:

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

Vi brukte en enkel hvis erklæring for å sjekke og da fikk vi bare det vi har på lokal lagring og plasserer det som HTML-en av gjengens uordnede liste.

Hvis du tester vår enkle app, og vi oppdaterer siden, ser vi at den allerede fungerer, og alt vi har igjen, er å skape funksjonen for når brukeren velger å rydde alle oppgavene. Når det skjer, fjerner vi all lokal lagring, oppdater siden for at endringene trer i kraft, og returner deretter falsk for å forhindre hash foran url slik:

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

Med dette gjort har vi vår app fullt ut i bruk. Den fulle koden ser slik 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'). Foranstilt (" 
  "+ Beskrivelse +" 
  "); $ ('# form') [0] .reset (); var todos = $ ('# todos'). html (); localStorage.setItem ('todos', todos); return false;}); if (localStorage.getItem ( 'todos')) {$('#todos').html(localStorage.getItem('todos'));}  $ ('# clear'). klikk (funksjon () {window.localStorage.clear (); location.reload (); return false;}); 

Nettleserstøtte

Støtten til nettoppbevaring er ganske bra for en HTML5-spesifikasjon; det støttes av alle de store nettleserne og til og med IE8, så det eneste du må være forsiktig med er IE7 hvis du fortsatt støtter det.

Konklusjon

Lokal lagring i små programmer som dette kan meget vellytte erstatninger for databaser. Lagring av små mengder data trenger ikke å være komplisert.

Hvordan lagrer du data fra JavaScript? Foretrekker du informasjonskapsler eller databaser til lokal lagring? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, lagringsbilde via Shutterstock.