Kuinka käyttää paikallista tallennustilaa JavaScriptille

Tehtävän tekeminen on yleensä ensimmäinen sovellus, jota opit rakentaessasi JavaScriptiin, mutta kaikkien näiden sovellusten ongelmana on, että kun lataat sivun uudelleen, kaikki ne tehtävät ovat poissa.

On kuitenkin olemassa yksinkertainen ratkaisu, ja se on käyttää paikallista tallennustilaa. Paikallisen tallennuksen hyvää on, että voit tallentaa ne datatietueet käyttäjän tietokoneeseen niin, että kun ne lataavat sivun kaikki todo: nsa ovat edelleen siellä ja paikallinen tallennus on varsin yksinkertaista, kun kyse on tietojen tallentamisesta ja tietojen tallentamisesta se on saatavilla sivulta.

Mikä on paikallista varastointia?

Paikallinen tallennus on osa web-tallennustilaa, joka on osa HTML5-määritystä. Tietojen tallentamiseen on kaksi vaihtoehtoa:

• Paikallinen tallennus: tallentaa tiedot ilman vanhentumispäivää, ja tämä on se, jota käytämme, koska haluamme, että meidän on tehtävä sivuilla mahdollisimman pitkään.
• Istunnon tallennus: tallentaa tiedot vain yhteen istuntoon, joten jos käyttäjä sulkee välilehden ja avaa sen uudelleen, kaikki tiedot poistetaan.

Yksinkertaisesti sanottuna kaikki tämä web-tallennustila on tallentaa nimeltään avain / arvo -parit paikallisesti ja toisin kuin evästeissä, nämä tiedot jatkuvat, vaikka suljet selaimen tai sammutat tietokoneesi.

HTML

Jos ajattelemme tehtävälista, mitä tarvitsemme, on:

• Ansioluettelo tehtävän tekemiseen.
• Syöttöpainike, johon lisätään tehtävämme.
• Painike, jolla kaikki tehtävät poistetaan.
• Paikkamerkin järjestämättömät luettelot, joissa tehtävämme on sijoitettu luettelokohteisiin.
• Ja lopuksi tarvitsemme paikkamerkkiosaston näyttämään hälytyksen, kun yrität syöttää tyhjän tehtävän.

Joten HTML-koodimme pitäisi näyttää tältä:

  
      Clear All  
  
  

Se on melko vakio paikkamerkki-HTML ja meidän javascriptin avulla voimme täyttää tämän kaiken dynaamisen sisällön avulla.

Koska käytämme jQueryä tässä esimerkissä, sinun on myös sisällytettävä se HTML-dokumenttiin.

JavaScript

Jos ajattelemme yksinkertaisen tehtävän rakennetta, meidän on ensin tarkistettava, milloin käyttäjä napsauttaa lisäyspainiketta ja tarkistaa, onko syötteellä tyhjä arvo, kuten:

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

Teimme vain tarkistamisen napsauttamalla lisäyspainiketta ja suorittamalla yksinkertainen testi tarkistaaksesi, onko käyttäjä täyttänyt syötteen jotain. Jos ei ole, hälytyshaara häipyy ja pysyy 1000 ms: n ajan ja sitten himmenee. Lopuksi palaamme vääriä niin, että selain ei lue loput käsikirjoituksesta ja lisää silti listan kohteen.

Seuraava asia, jonka tarvitsemme, on lisätä listan kohde syötteen arvoon ja siirrämme sen eteenpäin niin, että kun käyttäjä lisää tehtävän, se siirtyy aina luettelon alkuun ja tallentaa sitten luettelon kohteen paikalliseen varastointiin, kuten:

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

Kuten näet, se on melko vakio jQuery ja kun on kyse paikallisesta tallennustilasta, meidän on tallennettava avain ja arvo. Avain on nimemme itsellemme ja tässä tapauksessa sain juuri sen nimen "todos" ja sitten meidän on täsmennettävä, mitä todella haluamme säästää, ja tässä tapauksessa se on kaikki HTML, joka on sijoitettu todos järjestämättömään luetteloon . Kuten näet, me vain tarttui jQueryn avulla ja lopulta palautimme vääriä, jotta lomake ei lähetä ja sivusi ei lataudu uudelleen.

Seuraava askel on tarkistaa, onko meillä jotain, joka on jo tallennettu koneessamme olevaan paikalliseen tallennustilaan, ja jos tarvitsemme, meidän on tehtävä se sivulle, joten kun annoimme avaimellamme nimen todos, meidän on tarkistettava sen olemassaolon niin:

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

Käytimme yksinkertaista lauseketta tarkistamiseen, ja sitten saimme vain sen, mitä meillä on paikalliseen tallennustilaan ja sijoitamme sen tehtäväluettelon HTML-järjestykseen.

Jos testat yksinkertaisen sovelluksen ja lataamme sivun uudelleen, näemme, että se on jo käytössä, ja kaikki, mitä olemme jättäneet, on luoda toiminto, kun käyttäjä päättää poistaa kaikki tehtävät. kun näin tapahtuu, tyhjennämme kaikki paikalliset tallennustilat, lataamme sivun muutoksiin, jotka tulevat voimaan ja palauttavat sitten väärin estämään hashin url: n edessä niin kuin:

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

Tällöin sovelluksemme toimii täysin. Täysi koodi näyttää tältä:

$('#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 (" 
  "+ Kuvaus +" 
  "); $ ('# lomake') [0] .reset (); var todos = $ ('# todos'). html (), localStorage.setItem ('todos', todos); jos (localStorage.getItem (Todos ')) {$('#todos').html(localStorage.getItem('todos'));}  klikkaa (toiminto () {window.localStorage.clear (); location.reload (); return false;}); 

Selaintuki

Tuki web-tallennukselle on melko hyvä HTML5-määrittelyyn; se tukee kaikkia tärkeimpiä selaimia ja jopa IE8, joten ainoa asia, jota sinun tarvitsee varoa, on IE7, jos tuette sitä edelleen.

johtopäätös

Paikallinen tallennus tällaisissa pienissä sovelluksissa voi olla erittäin tyytyväinen tietokantojen korvikkeisiin. Pienien tietomäärien tallentamisen ei tarvitse olla monimutkaista.

Kuinka tallennat tietoja JavaScriptista? Haluatko evästeet tai tietokannat paikalliseen tallennustilaan? Kerro meille kommentit.

Esitetty kuva / pikkukuva, tallennuskuva kautta Shutterstock.