Creare un'applicazione to-do è solitamente la prima applicazione che impari a costruire in JavaScript, ma il problema con tutte quelle app è che quando ricarichi la pagina tutte quelle cose da fare sono sparite.
Tuttavia, esiste una soluzione semplice, che consiste nell'utilizzare la memoria locale. La cosa buona dell'archiviazione locale è che puoi salvare quei bit di dati sul computer dell'utente in modo che quando ricaricano la pagina tutti i loro todo rimarranno lì e lo storage locale è in realtà abbastanza semplice quando si tratta di salvare i dati e fare disponibile sulla pagina.
Lo storage locale fa parte dello storage web, che a sua volta fa parte delle specifiche HTML5. Ci sono due opzioni per la memorizzazione dei dati nella specifica:
In termini semplici, tutto ciò che l'archiviazione web fa è memorizzare coppie chiave / valore localmente e diversamente dai cookie questi dati persistono anche se si chiude il browser o si spegne il computer.
Se pensiamo a una lista di cose da fare, abbiamo bisogno di:
Quindi il nostro codice HTML dovrebbe assomigliare a questo:
È un HTML segnaposto piuttosto standard e con il nostro javascript possiamo riempire tutto con contenuti dinamici.
Dato che utilizzeremo jQuery in questo esempio, dovresti includerlo anche nel tuo documento HTML.
Se pensiamo alla struttura di una semplice app da fare, la prima cosa che dobbiamo fare è controllare quando l'utente fa clic sul pulsante aggiungi e controlla se l'input ha un valore vuoto, in questo modo:
$('#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;}Tutto quello che abbiamo fatto è stato controllare un clic sul pulsante Aggiungi ed eseguire un semplice test per verificare se l'utente ha riempito l'input con qualcosa. Altrimenti, il div alert si dissolve e rimane per 1000ms e poi si attenua. Alla fine restituiamo false in modo che il browser non legga il resto dello script e aggiunga comunque la voce dell'elenco.
La prossima cosa che dobbiamo fare è inserire una voce di lista con il valore nell'input e la aggiungeremo in modo tale che quando l'utente aggiunge una cosa da fare andrà sempre all'inizio della lista e poi salverà la voce di elenco in archiviazione locale, in questo modo:
// 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;});Come puoi vedere, è un jQuery piuttosto standard e quando si tratta di storage locale è necessario salvare una chiave e un valore. La chiave è un nome che abbiamo impostato per noi stessi e in questo caso l'ho appena chiamato 'todos' e quindi dobbiamo specificare cosa vogliamo effettivamente salvare, e in questo caso è tutto l'HTML che è inserito all'interno della lista non ordinata . Come puoi vedere, l'abbiamo appena acquisito utilizzando jQuery e alla fine abbiamo restituito false in modo che il modulo non venga inviato e la nostra pagina non venga ricaricata.
Il nostro prossimo passo è verificare se abbiamo qualcosa sulla memoria locale già salvata nella nostra macchina e se lo dobbiamo inserire nella pagina, così da quando abbiamo dato alla nostra chiave il nome todos dobbiamo verificarne l'esistenza in questo modo:
// if we have something on local storage place thatif(localStorage.getItem('todos')) {$('#todos').html(localStorage.getItem('todos'));}Abbiamo usato una semplice istruzione if per verificare e quindi abbiamo semplicemente ottenuto ciò che abbiamo sulla memoria locale e lo abbiamo inserito come HTML della lista non ordinata delle cose da fare.
Se testate la nostra semplice app e ricarichiamo la pagina, vediamo che sta già funzionando e tutto ciò che rimane è creare la funzione per quando l'utente sceglie di cancellare tutte le cose da fare; quando ciò accadrà, cancelleremo tutta la memoria locale, ricaricheremo la pagina affinché le nostre modifiche diventino effettive, e quindi restituiremo false per evitare che l'hash sia davanti all'url in questo modo:
// clear all the local storage$('#clear').click( function() {window.localStorage.clear();location.reload();return false;});Fatto questo, abbiamo la nostra app pienamente funzionante. Il codice completo è simile a questo:
$('#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 (" "+ Descrizione +" "); $ ('# form') [0] .reset (); var todos = $ ('# todos'). html (); localStorage.setItem ('todos', todos); return false;}); if (localStorage.getItem ( 'Todos')) {$('#todos').html(localStorage.getItem('todos'));} $ ('# cancella'). click (function () {window.localStorage.clear (); location.reload (); return false;}); Il supporto per l'archiviazione web è abbastanza buono per una specifica HTML5; è supportato da tutti i principali browser e persino da IE8, quindi l'unica cosa di cui dovresti essere cauto è IE7 se continui a supportarlo.
L'archiviazione locale in piccole app come questa può benissimo sostituire i database. La memorizzazione di piccole quantità di dati non deve essere complessa.
Come immagazzini i dati da JavaScript? Preferisci cookie o database allo storage locale? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine di archiviazione via Shutterstock.