LocalStorage e SessionStorage

In questo video parleremo di 2 nuovi oggetti introdotti da HTML5 per salvare informazioni nel browser dell'utente senza dover ricorrere all'uso dei cookie: localStorage e sessionStorage.
Questi 2 oggetti sono estremamente più semplici da maneggiare dei normali cookie e JavaScript può crearli, cambiarne i valori e recuperare i dati salvati in essi.
I punti di forza di questi 2 nuovi oggetti sono:

  • la semplicità di utilizzo (quindi creazione e manipolazione)
  • possono essere immagazzinate informazioni molto più lunghe di un normale cookie
  • il codice scritto dal programmatore risulta molto più semplice e compatto

In questo video vedremo come riscrivere la stessa funzionalità del video precedente "sez7/5" (colorare il body della pagina web con un colore scelto dall'utente), però utilizzando questi 2 nuovi oggetti: localStorage e sessionStorage anzichè usare dei normali cookie.

Trascrizione: (click per espandere)
salve a tutti oggi parleremo dei web
storage objects cosa sono praticamente
con html5 sono stati inventati questi
due nuovi oggetti localStorage sessionStorage
per ovviare il problema di
lavorare coi cookie come abbiamo visto
nel video precedente perché è un po
complesso estrarre informazioni dei
cookie eccetera quindi usando questi due
oggetti viene si possono fare
praticamente le stesse cose però è più
facile estrarre informazioni e in più si
possono salvare informazioni molto più
lunghe articolate
i due
oggetti sono identici solo che il primo
localstorage non scade mai mentre il
sessionstorage vale solo per questa
sessione nel momento in cui io abbandono
la pagina viene cancellato andiamo a
vedere di copiare funzionalità che
avevamo costruito nel video precedente
con i cookie cioè di colorare il
background della pagina in base alle
preferenze dell'utente però usando local
storage e session storage e allora io creo
una variabile e la chiamo colore storage
e qui ci usando l'oggetto local storage
come vedete qui qui ho messo window.localeStorage
ma come al solito window non è
obbligatorio quindi vado a scrivere
direttamente localstorage e poi si
usa il metodo getitem e dentro qui vado
a scrivere il nome della proprietà o
meglio il nome della chiave come abbiamo
visto prima viene salvato e sotto forma
di chiave valore qui vado a specificare
il nome della chiave quindi colore e e
poi ci metto subito un blocco
condizionale allora metto se colore
storage non esiste quindi io uso il
simbolo di negazione se non esiste lo
vado a creare quindi colore crea un
prompt e per l'utente inserire un colore
e lo salvo dentro alla mia variabile
colore e poi creo il local storage e qui
si usa il metodo setitem e qui si mette
dentro la chiave valore quindi abbiamo
detto colore è la chiave è il valore è
il colore inserito dall'utente quindi
questo
questa variabile qui e poi vado ad
assegnare al mio documento il colore
document.body.style.backgroundColor e
ci metto dentro colore storage
colore e basta poi metto else quindi se
il local storage ha già la mia coppia
valore colore vado a direttamente a
colorare il body cui mi faccio così e
qui ci metto colore storage poi crea
anche una funzione che mi cancella il
colore o meglio mi cambia il colore
possiamo fare cambia colore chiamarla
cambia colore local storage set item
cancello cancella colore set hayden e
qui a segno la mia chiave colore ha un
valore vuoto è una stringa vuota
location.reload
ecco qui poi assegno questa funzione qui
a un evento onclick
ok e poi salvo la pagina come vedete
sembra tutto uguale a prima io qui
inserisco un colore lo chiamo red è
adesso ho il mio red se voglio cancellare
il colore cliccami e posso inserire un
altro colore diciamo mettiamo green come
vedete le funzionalità sono simili a
primo però il codice molto più semplice
e l'estrazione
del valore inserito dall'utente è molto
più facile
e qui sempre dentro al tab application
sotto al local storage
qui potete vedere tutti local storage
salvati dentro al vostro browser e
sempre in chiave colore eccola qui vi
faccio vedere come si usa le
lo session storage copio questo control+c
salvo cancella tutto praticamente allora
stessa identica cosa abbiamo detto
cambia solo che invece di usare
slocalstorage si usa session storage quindi facciamo un altro colore tanto
per cambiare
poi se voglio cambiare metto yellow ecco
qua come vedete semplicissimo funzionano
alla stessa maniera ripeto local
storage rimane sempre session storage nel
momento in cui io abbandono la pagina
viene cancellato con questo è tutto ci
sentiamo la prossima ciao
File del video: