Sei sulla pagina 1di 9

localStorage: la vostra prima Applicazione

Conoscenze Base
HTML JavaScript

Cosa succede se non le possiedi? Cosa andrete a costruire

Presentazione fornita da html5andmore.info presente anche su ShareSlide

localStorage: la vostra prima Applicazione

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.

Presentazione fornita da html5andmore.info presente anche su ShareSlide

localStorage: la vostra prima Applicazione

Controllo che il browser possa usare localStorage

Quando il form viene inviato creo alcune variabili di controllo

Se il campo non vuoto lo inserisco con localStorage.setItem().

Se il campo non stato inserito lancio un errore.

Presentazione fornita da html5andmore.info presente anche su ShareSlide

localStorage: la vostra prima Applicazione

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().

Presentazione fornita da html5andmore.info presente anche su ShareSlide

localStorage: la vostra prima Applicazione

Catturo levento click sul bottone che abbiamo creato precedentemente usando lid #pulisci Utilizzo il metodo localStorage.clear() per ripulire tutto il database.

Inserisco in una variabile answer se lutente daccordo a cancellare i dati.


Grazie alla funzione getAllItems() potrete ripopolare la vostra lista.

Presentazione fornita da html5andmore.info presente anche su ShareSlide

localStorage: la vostra prima Applicazione

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;

temp con laiuto del


metodo .split() creo un array di valori;

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.

Presentazione fornita da html5andmore.info presente anche su ShareSlide

localStorage: la vostra prima Applicazione

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().

Presentazione fornita da html5andmore.info presente anche su ShareSlide

localStorage: la vostra prima Applicazione

Cosa avete appreso


Il localStorage si utilizza con JavaScript

Abbiamo usato jQuery

localStorage.setItem() localStorage.removeItem()

Esistono funzioni per impostare o eleminare singoli campi.

Con poco jQuery possiamo creare interessanti effetti


Possiamo inserire anche pi valori con la stessa chiave

getAllItems()

.join() .split()

Presentazione fornita da html5andmore.info presente anche su ShareSlide

localStore: la vostra prima Applicazione

Perch non venite a trovarci?


Una vostra visita far sempre piacere dalle parti di html5andmore.info, e sicuramente lasciare un commento sul nostro sito sar il modo pi veloce per contattarci, ma magari voi preferite:

Per raggiuncerci invece su questi network vi baster invece cercare HTML5 and More, e l ci troverete!

Presentazione fornita da html5andmore.info presente anche su ShareSlide

Potrebbero piacerti anche