Ma prima di vedere le parti più avanzate non credete sia meglio iniziare un passo alla volta? Partiamo a vedere il codice HTML5 base che vi permetterà di sfruttare questa tecnica per poi andare ad imparare come, con un minimo di codice JS, sarà possibile salvare le informazioni ottenute.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Una ToDo List con HTML5 localStorage</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <form id="inserimento" method="post"> <input type="text" name="desc" value="Cosa devi fare"> <input type="number" name="quando" placeholder="In gg"></pre> <input type="submit" value="Salva"> </form> <ul id="lista"> <li>Loading</li> </ul> <button type="button" id="pulisci">Cancella Tutto</button> </body> </html> |
Eccovi di fronte alla pagina base che utilizzerete… In questo caso non dovreste trovare niente di nuovo, semplicemente vecchi e familiari tag HTML che vi permetteranno di creare una semplicissima pagina HTML con un campo di inserimento testo ed un pulsante che permetterà di inviare i dati inseriti dall’utente al server per poter essere successivamente processati.
Una piccola panoramica
Ma ritengo che, vista anche la natura stessa del sito, sia doverosa una breve presentazione degli elementi contenuti in questa pagina, o meglio dei più importanti! Se siete a conoscenza delle basi HTML vi suggerisco di saltare questa parte e procedere alla prossima sezione di questa puntata, se invece pensate che una breve introduzione non sia abbastanza… Restate collegati! Questo blog ha come scopo di insegnarvi tutto il possibile riguardante HTML5 e le novità introdotte con esso!
- <!DOCTYPE html> – questo elemento, che comunque non fa parte dei tag HTML5, può essere rappresentato come un messaggio che viene inviato al browser, grazie ad esso è possibile far capire al browser che avrà di fronte una pagina HTML;
- <html> - l’elemento radice di ogni pagina HTML5, delimita al suo interno i tag HTML5 da utilizzare per mostrare la pagina;
- <head> & <title> – due elementi molto importanti che vi permetteranno di impostare il titolo della vostra pagina nella barra del browser e vi permetteranno di settare alcune informazioni utili ai motori di ricerca;
- <body> – al contrario dei due elementi precedenti, definisce il corpo della pagina, ovvero racchiude in se tutti gli elementi strutturali della vostra pagina HTML5;
- <form> & <input> – questi due elementi permettono di creare un campo di inserimento dati da fornire all’utente (un campo login ad esempio), a seconda dell’attributo fornito all’elemento input quest’ultimo può assumere diverse forme (come quella di un bottone per l’invio dei dati);
- <ul> & <li> – questi due tag vi permettono rispettivamente di creare una lista non ordinata (come quella che state leggendo) e gli elementi che andranno a riempire la lista (come questa riga);
- <button> – elemento HTML che vi permette di creare bottoni di varia natura da sfruttare successivamente con JS o PHP, ma anche altri linguaggi di programmazione!
Ecco visti i vari elementi HTML5 che abbiamo trovato in questa pagina, ma che succede? Abbiamo già fatto tutto? La nostra pagina è pronta ad utilizzare il localStore e permettervi di salvare dei dati all’interno del browser dei vostri visitatori?
Assolutamente no!
A questo punto avrete creato la struttura di base della vostra prima applicazione HTML5 ma per accedere e manipolare i dati all’interno del database all’interno del browser dovrete utilizzare un linguaggio di programmazione client-side che permette di fare moltissimo, e prende il nome di JavaScript (JS).
Aggiungiamo il JavaScript
Come vi ho appena preannunciato, per utilizzare le potenzialità offerte dal localStorage avrete la necessità di utilizzare JS, benché sia un linguaggio di programmazione molto potente e di comune utilizzo in questa puntata, ma anche nelle prossime che verranno pubblicate, vi verrà presentato il codice JS tramite l’utilizzo della libreria jQuery.
Se ancora non conoscete jQuery, vi consiglio di andare a cercare qualche buon articolo introduttivo, semplicemente perché sviluppare con jQuery è il modo più facile e divertente per apprendere JS, senza parlare dell’ottima curva di apprendimento che porta con se! Io stesso ho intenzione di affrontare il discorso jQuery più da vicino, magari proprio sul mio blog personale, ma andiamo intanto a vedere il codice che ci servirà per utilizzare il localStorage, ed il primo passo che dobbiamo fare è caricare la nostra libreria! Andate a posizionarvi sopra la fine del vostro elemento body (</body>) ed inserite quanto segue:
|
1 2 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> </body> |
Vi è bastato inserire un semplice elemento HTML5 per essere in grado di far caricare questa potentissima libreria ed iniziare a usarla per salvare e maneggiare dati con il localStorage! Ma ancora una volta, non siete ancora pronti ad utilizzare le potenzialità del localStorage, per fare questo dovrete inserire del codice JS che permetta di svolgere questo compito! Andiamo a vederlo da vicino!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$(document).ready( function(){ if( typeof(localStorage) == 'undefined' ){ alert('Sembra che non sia attivo il localStorage, provato ad aggiornare il browser ad una versione recente?'); } else { //Se il localStore è supportato allora svolgi questo codice $('#inserimento').submit( function(){ var newDate = new Date(); var itemId = newDate.getTime(); //Prendo i valori direttamente dal form var desc = $("input[name='desc']").val(); //Controllo che i valori nei campi non siano vuoti if( desc != "" ){ try{ localStorage.setItem( itemId, desc ); } catch(e){ if( e == QUOTA_EXCEEDED_ERR ){ alert('non ho spazio...'); } } } else { alert('tutti i campi sono richiesti'); } }); } }); |
Probabilmente vi sentirete confusi da tutto questo codice, ma non preoccupatevi, il codice che vi permetterà di svolgere delle azioni con i dati inseriti dal vostro utente sarà veramente semplice da capire, ma andiamo prima a vedere le linee più interessanti!
- linea 1, $(document).ready() è da dove tutto ha inizio! Praticamente state dicendo al vostro browser “Ehy! quando hai finito di caricare la pagina, preparati per un pò di azione;
- linea 2, if( typeof(localStorage) == ‘undefined’) è un semplice controllo, ovvero state chiedendo al browser se conosce il localStorage, se vi viene risposto di no (undefined) allora non farete altro che mostrare un messaggio di errore;
- linea 6, ma se il browser che il vostro visitatore sta utilizzando potremmo lanciare un controllo, da eseguire quando inviato, sul nostro form grazie a $(‘#inserimento’).submit();
- linea 16, localStorage.setItem( itemId, desc ) grazie all’uso di questa semplicissima riga di codice sarete in grado di salvare il contenuto del campo input all’interno del localStorage del browser del vostro utente.
Come avrete sicuramente notato ho saltato alcune parti del blocco di codice, ma quello che ho fatto semplicemente è creare delle variabili di controllo per creare anche in numero identificativo per il campo, e poi successivamente ho preso il valore del nostro campo input e, controllando che non sia vuoto, sono andato ad inserirlo nel database gestendo dei problemi che potevano sorgere.
Se tutto quello che ho appena scritto vi ha soltanto confuso di più, vi consiglio di andare a vedere il video di questa puntata dove l’argomento viene spiegato meglio.
Avete appena imparato come inserire una coppia chiave-valore all’interno del localStorage, ma come comportarsi quando in una stesso invio volete inserire più di una stringa di testo? Il concetto di chiave-valore è valido soltanto se ad una determinata chiave corrisponde un unico valore, ma esiste un semplice metodo che ci permetterà di trasformare un array di valori in una semplice stringa di testo!
localStorage, inseriamo più valori
Come avete appena visto, l’inserimento di un singolo valore è una cosa semplicissima, infatti vi basterà invocare il metodo localStorage.setItem() specificandone id e valore ed il gioco è fatto. Ma cosa dovreste fare se ad esempio volete trasformare la vostra toDo List per inserire anche una scadenza per il compito stesso? Per prima cosa dovrete aggiungere un altro elemento input che sia capace di leggere il dato inserito, quindi recatevi nuovamente al vostro form e modificatelo come segue:
|
1 2 3 4 5 |
<form id="inserimento" method="post"> <input type="text" name="desc" value="Cosa devi fare?"> <input type="number" name="quando" value="Entro quando? (gg)"> <input type="submit" value="Salva"> </form> |
A questo punto avete aggiunto un nuovo campo che vi permetterà di gestire i giorni entro il quale il compito dovrà essere collegato, se siete degli attenti osservatori vi sarete sicuramente accorti che il secondo campo che abbiamo appena inserito è di un diverso tipo. Infatti con la dichiarazione type=”number” diciamo al browser che questo dovrà essere un campo numero, permettendogli di eseguire delle verifiche per controllare che tutto avvenga come richiesto.
La possibilità di impostare nuovi tipi di campi input è stata introdotta con HTML5, e avremo tempo per andare a vedere queste nuovità, ve lo assicuro! Ma siete giunti qui con la speranza di imparara come inserire più valori all’interno di una singola chiave localStore, giusto? Perché non andiamo adesso a vedere come si trasforma il nostro codice JS?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
} else { getAllItems(); //carico tutti gli elementi salvati $('#inserimento').submit( function(){ var newDate = new Date(); var itemId = newDate.getTime(); var values = new Array(); //Prendo i valori direttamente dal form var desc = $("input[name='desc']").val(); var quando = $("input[name='quando']").val(); //Inserisco i dati all-interno del mio array values.push(desc); values.push(quando); //Controllo che i valori nei campi non siano vuoti if( desc != "" && quando != "" ){ try{ localStorage.setItem( itemId, values.join(";") ); } catch(e){ if( e == QUOTA_EXCEEDED_ERR ){ alert('non ho spazio...'); } } } else { alert('tutti i campi sono richiesti'); } }); |
Eccovi di fronte al nuovo codice! Volevo soltanto segnalarvi che in questo blocco di codice è presente la chiamata ad una funzione, la funzione grtAllItems() in questa puntata non andremo a vedere da vicino questa funzione, perché esula dagli scopi della stessa, vi basterà sapere che vi permetterà di mostrare, in tempo reale, l’aggiunta dei vari elementi (cosa che altrimenti avrebbe richiesto un refresh della pagina). Se vi interessa invece vedere come è stata costruita, potrete sempre scaricarvi il file incluso in questa puntata e studiarvi il codice :D
Le cose più interessanti di questo blocco di codice le troviamo alla linea 7, quando andrete a creare il vostro array e alle linee 14 e 15, dove inseriamo i valori presi dai campi all’interno dell’array values. Adesso avete il vostro array contenente i valori del form, ma non potete inserirlo all’interno del database così com’è! Dovrete prima crearne una stringa, ma come fare?
La soluzione più semplice è chiamare la funzione JS .join() che vi permetterà di unire in una unica stringa tutti i valori contenuti all’interno dell’array semparandoli da un punto e virgola, come potete vedere alla linea 20. Esiste un altro elemento HTML5 che vi permetterà di cancellare i dati inseriti nel localStorage.
Come cancellare i dati dal localStorage
Per permettere l’eliminazione di tutti i dati contenuti all’interno del localStorage dovrete semplicemente utilizzare un altro metodo appartenente a localStorage in questo modo:
|
1 2 3 4 5 6 7 |
$("#pulisci").click( function(){ var answer = confirm("Sei sicuro di voler cancellare tutto?"); if( answer ){ localStorage.clear(); getAllItems(); } }); |
Vi ricordate del nostro elemento <button>? É giunto il momento di sfruttarlo! Grazie a jQuery metteremo il nostro browser in attesa che il bottone venga cliccato, se questo succede mostreremo una finestra pop-up dove diciamo che questa funzione andrà a cancellare tutto il contenuto del vostro localStorage. Una volta controllato che il vostro utente abbia detto di si, procederemo ad utilizzare il metodo localStorage.clear() per ripulire il database da tutti i dati salvati!
Conclusioni
Benché sia il file di esempio che il codice contenuto nello zip contengono la possibilità di eliminare le singole voci dal localStorage per motivi di lunghezza ho preferito non trattarli in questa puntata. Non per mancanza di voglia, semplicemente per darvi il gisto numero di nozioni in ogni puntata!
Se desiderate avventurarvi nella scoperta di come questo, e anche la funzione getAllItems(), funzioni perché non scaricate il file e andate a controllarlo? Se non avete voglia di farlo, nessun problema, moltissime saranno le occasioni in cui tratteremo questi argomenti, già la prossima puntata del localStorage andrà a riprendere il tutto!
Detto questo, vorrei chiedervi un favore, o meglio, un parere. Cosa ne pensate? Vi è piaciuta la puntata? Se foste stati voi a spiegare questi concetti avreste fatto qualcosa di diverso? Insomma qualsiasi suggerimento/critica vi passi per la testa, sarò ben più che felice di ascoltagli e pendere nota!
articolo fatto benissimo e utilissimo.
Una domanda: dosso avere tutti i codici della puntata?
Al momento non sono disponibili, sto cercando di ridare vita a questo sito, ma c’è ancora un pò di lavoro da fare.