Hvernig á að nota staðbundna geymslu fyrir JavaScript

Að búa til forrit sem er að gera er venjulega fyrsta forritið sem þú lærir hvernig á að byggja á JavaScript en vandamálið með öllum þeim forritum er að þegar þú endurhleðir síðuna eru öll þau verkefni sem eru til staðar farin.

Það er einföld lausn þó, og það er að nota staðbundna geymslu. The góður hlutur af staðbundinni geymslu er að þú getur vistað þessar bita af gögnum á tölvu notandans þannig að þegar þeir endurhlaða síðuna þá munu öll þeirra todo vera þar og staðbundin geymsla er í raun alveg einföld þegar kemur að því að vista gögnin og gera Það er aðgengilegt á síðunni.

Hvað er staðbundið geymsla?

Staðbundin geymsla er hluti af vefur geymslu, sem sjálft er hluti af HTML5 forskriftinni. Það eru tveir möguleikar til að geyma gögn í forskriftinni:

• Staðbundin geymsla: geymir gögn án gildistíma og þetta er sá sem við munum nota vegna þess að við viljum að við þurfum að vera á síðunni eins lengi og mögulegt er.
• Session Bílskúr: aðeins vistar gögnin fyrir eina lotu þannig að ef notandinn lokar flipanum og enduropnar það mun allt gögn þeirra vera farinn.

Í einföldum skilmálum, allt sem vefur geymsla er búð sem heitir lykill / gildi pör á staðnum og ólíkt smákökum eru þessar upplýsingar viðvarandi jafnvel þótt þú lokar vafranum þínum eða slökkva á tölvunni þinni.

HTML

Ef við hugsum um að gera lista sem við þurfum er:

• Inntak til að setja okkar til-gera.
• Innsláttartakki til að bæta við verkefninu okkar.
• Hnappur til að hreinsa öll verkefni.
• Óákveðinn greinir í ensku placeholder óviðkomandi lista þar sem okkar til-gera er verður sett í lista atriði.
• Og að lokum þurfum við staðardóm til að sýna viðvörun þegar þú reynir að slá inn tómt til að gera.

Þannig að HTML okkar ætti að líta svona út:

  
      Clear All  
  
  

Það er nokkuð staðlað staðgengill HTML og með javascript okkar getum við fyllt allt þetta upp með dynamic efni.

Þar sem við munum nota jQuery í þessu dæmi þá ættir þú einnig að setja það í HTML skjalið þitt.

JavaScript

Ef við hugsum um uppbyggingu einfalt forrit sem þú þarft að gera er það fyrsta sem við þurfum að gera er að athuga hvenær notandinn smellir á bæta við hnappinn og athugaðu hvort inntakið hefur tómt gildi, eins og svo:

$('#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 sem við gerðum var að athuga með því að smella á bæta við hnappinn og keyra einfalt próf til að athuga hvort notandi fyllti inntakið með eitthvað. Ef ekki, vekur viðvörunin djúpt inn og dvelur í 1000ms og þá hverfur. Að lokum skilum við aftur rangar þannig að vafrinn lesi ekki afganginn af handritinu og bætir enn við listann.

Það næsta sem við þurfum að gera er að setja inn lista með gildinu í inntakinu og við munum fjarlægja þetta þannig að þegar notandinn bætir við að gera það mun alltaf fara í upphaf listans og síðan vistaðu listann á staðbundin geymsla, eins og svo:

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

Eins og þú sérð er það nokkuð venjulegt jQuery og þegar það kemur að staðbundinni geymslu þurfum við að vista lykil og gildi. Lykillinn er nafn sem við setjum fyrir okkur og í þessu tilfelli kallaði ég bara 'todos' og þá þurfum við að tilgreina það sem við viljum raunverulega spara og í þessu tilfelli er það allt HTML sem er sett inn í óskráðan lista . Eins og þú sérð tókum við bara að nota jQuery og við fengum loksins falskur svo að eyðublaðið leggi ekki fram og síðunni okkar endurhleðst ekki.

Næsta skref okkar er að athuga hvort við höfum eitthvað á staðbundinni geymslu sem þegar er vistað í vélinni okkar og ef við gerum þurfum við að setja það á síðunni, svo þar sem við gaf lykilinn okkar nafnið sem við þurfum að athuga fyrir tilvist þess eins og svo:

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

Við notuðum einfalda ef yfirlýsingu til að athuga og þá fengum við aðeins það sem við höfum á staðnum geymslu og setjum það sem HTML af óskipuðum listanum að gera.

Ef þú prófar einfaldan app og við endurhlaða síðunni getum við séð að það er þegar að vinna og allt sem við höfum skilið er að búa til aðgerðina fyrir þegar notandinn velur að hreinsa allt sem þarf að gera; Þegar það gerist munum við hreinsa öll staðbundin geymsla, endurhlaða síðuna þar sem breytingar okkar eiga sér stað og fara síðan aftur í rangar til að koma í veg fyrir kjötið fyrir framan vefslóðina eins og svo:

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

Með þessu gert höfum við app okkar fullkomlega að vinna. Fullkóðinn lítur svona út:

$('#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 (" 
  "+ Lýsing +" 
  "$; '$ form') [0] .reset (); var todos = $ ('# todos'). html (); localStorage.setItem ('todos', todos); return false;}); ef (localStorage.getItem ('todos')) {$('#todos').html(localStorage.getItem('todos'));}  $ ('# clear'). smelltu (virka () {window.localStorage.clear (); staðsetning.reload (); return false;}); 

Vefur stuðningur

Stuðningur við vefur geymsla er nokkuð góð fyrir HTML5 forskrift; Það er studd af öllum helstu vafra og jafnvel IE8, svo það eina sem þú gætir þurft að vera á varðbergi gagnvart IE7 ef þú ert ennþá að styðja það.

Niðurstaða

Staðbundin geymsla í litlum forritum eins og þetta getur mjög vel tekið til staðgöngu fyrir gagnagrunna. Geymsla lítið magn af gögnum þarf ekki að vera flókið.

Hvernig geymir þú gögn úr JavaScript? Viltu frekar smákökur eða gagnagrunna til staðbundinnar geymslu? Láttu okkur vita í athugasemdunum.

Valin mynd / smámynd, geymslu mynd um Shutterstock.