Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Conoscenze Base
HTML JavaScript
Niente di nuovo da parte dellHTML Creiamo un form con un campo testo ed uno per linvio del form stesso.
Abbiamo una lista non ordinata che ospiter i dati inseriti ed aggiungiamo anche un bottone per ripulire il localStore.
Creo un array pronto ad ospitare i valori dei due campi input Con laiuto del metodo .push() potremo inserire i valori delle variabili allinterno dellarray.
Prendo i valori dei campi input e gli inserisco nelle variabili Inserisco i valori con localStorage.setItem(), trasformandoli da array in stringhe con il metodo .join().
Catturo levento click sul bottone che abbiamo creato precedentemente usando lid #pulisci Utilizzo il metodo localStorage.clear() per ripulire tutto il database.
Setto alcune variabili che mi permetteranno di creare un ciclo for che vi permette di analizzare gli elementi contenuti
taskKey conterr la
chiave del campo;
values conterr il
valore del campo;
timeTask conterr
lHTML per il nuovo elemento.
Controlliamo che la variabile contenente il nuovo elemento da aggiungere alla lista non sia vuoto.
Se dovesse essere vuoto ne imposto uno di default, e successivamente vado ad aggiornare la lista.
Abbiamo visto precedentemente cosa fare per ripulire il database, ma se volessimo rimuovere un solo valore?
E stato inserito dinamicamente un elemento span che porta in se la chiave del campo.
La variabile teskKey vi permetter di prendere il valore dellelemento <span> e utilizzare questo per rimuovere il valore con localStorage.removeItem()
Aggiorno nuovamente la lista con gli elementi rimasti con la funzione getAllItems().
localStorage.setItem() localStorage.removeItem()
getAllItems()
.join() .split()
Per raggiuncerci invece su questi network vi baster invece cercare HTML5 and More, e l ci troverete!