Trascrizione: (click per espandere)

salve a tutti oggi parleremo dei cookie
allora i cookie sono dei pezzettini di
informazione che il nostro file
aperto nella pagina del browser carica
direttamente nel browser dell'utente
questi i pezzettini di informazioni sono
sotto forma di stringhe e sono composte
da tre 3 parti
ogni parte è composta da una coppia
chiave valore
qui ho un esempio di cookie ad esempio
la prima parte è fino al
punto e virgola e come vedete è composta
da una coppia chiave valore in questo
caso la chiave la scritta colore e in
poi il valore è
red e la seconda parte è composta da expire è una data che la data di
scadenza del cookie e la terza parte è
la path che sarebbe dove la path
del file per cui questo cookie vale
javascript e può creare cancellare
sovrascrivere i cookie ma javascript
non è l'unico linguaggio di
programmazione che crea cookie ad
esempio se voi avete un server scritto
in php anche ai php puo' caricare cookie
era anche il vostro server può caricare
cookie quindi possiamo avere diversi
tipi di cookie nella nostra pagina web
andiamo a vedere adesso come creare un
cookie che salva un informazione sotto
forma di stringa è praticamente io vado
a chiedere all'utente il suo colore
preferito e poi in base alla risposta
dell'utente
vado a colorare il background della mia
pagina web e dopo salvo questa
informazione nel cookie in maniera che
ogni volta che l'utente accede a questo
file si trova già il colore che aveva
scelto come background
andiamo a vedere intanto come
creare il cookie allora io creo una
funzione function carica cookie ecco qui
e in questa funzione
la prima cosa che faccio è controllare
se esiste già un cookie dentro
al browser che ha il colore che l'utente
ha scelto quindi io crea una variabile
la chiamo cookie e con la proprietà
dell'oggetto document che si chiama
cookie vado a salvare tutti i cookie del
browser per quella pagina web dentro a
questa variabile
vado via un po' piano perché sarà una
funzione un po' complessa quindi dovete
capire tutti i passaggi poi creo un
blocco condizionale "if" è praticamente
la stringa salvata dentro la mia
variabile che sa che sarà una stringa
che a tutti i cookie su questa stringa
vado a cercare se dentro a questa
stringa c'è la parola colore allora creo
un un'espressione regolare test l'abbiamo
già vista quindi quindi non serve che vi
spiego troppo e quindi allora vado a
controllare se la parola colore è dentro
al ai nostri cookie se questa
espressione regolare ritorna vero vuol
dire che io ho già un cookie che ha
salvato e la preferenza del colore
dell'utente quindi vado a lavorare con
quella preferenza allora let
cookie colore e qui metto document
cookie split
cosa vado a fare qui vado a prendere
tutta la stringa complessiva di tutti i
cookies e adesso questo è solo
un cookie ma potrei avere 3 4 5 cookie
io non lo so quindi avrò una stringa
molto più lunga di questa vado a
suddividere la stringa ad ogni ad ogni
sua volta che viene trovato un punto e
virgola quindi io mi troverò che quando
arriva qui la stringa verrà divisa poi
quando arriva qui la stringa verra' divisa
o poi quando qui arriva qui la stringa
verrà divisa e se ci sono altri punti e virgola
verrà divisa ogni volta ogni parte
compresa tra un punto e virgola quindi
questa parte qui questa parte qui verrà
salvata dentro a questa variabile sotto
forma di array quindi questa parte qui
sarà un elemento della array questa parte
qui sarà un elemento della array
questa parte qui sarà un elemento
della array di fatto questo vado a ciclare
il mio array con un ciclo for..of allora
variabile element elemento del mio
cookie colore ecco qui e poi dentro qui
metto un altro blocco condizionale "if" e
faccio la stessa ricerca di prima solo
per l'elemento quindi io adesso dentro
all'array avrò elementi in forma di
coppia valore come ho spiegato prima
adesso vado a vedere se trovo un
elemento che ha il suo interno la la
parola colore se quando io trovo
l'elemento che ha la sua il suo interno
la parola colore
so che sto avendo a che fare con
l'elemento che ha il nome
che ha salvato la preferenza dell'utente
e quindi vado splittarlo nel punto e
virgola
quindi io prendo questo anzi siamo così
tutto è lo spirito nel punto virgola
perché la mia copia valore la possa
ospitare nel punto di virgola e quindi
andrò a salvare dentro alla questa
variabile due elementi un elemento sarà
e la parola colore e secondo elemento
sarà il valore del colore
fatto questo vado a colorare il mio
background quindi documento body style
background color e lo vado a colorare
col colore è salvato come valore quindi
sarà cookie color cookie colore
il secondo elemento perché il primo
elemento nel primo elemento ci sarà la
parola colore nel secondo elemento ci
sarà il valore del colore fatto questo
quindi se io ho già un cookie dove
dentro c'è la parola colore quindi ha
già ho già un cookie con la preferenza
dell'utente salvata vado a usare la
preferenza per colorare il mio
background altrimenti vado a creare un
cookie con la preferenza dell'utente
allora prima di tutto io creo un colore
qui usando un prompt che abbiamo già
visto e quindi inserire un colore
ovviamente dovrà l'utente dovrà inserire
un colore in lingua inglese altrimenti
non funziona perché sfortunatamente i
linguaggi di programmazione girano tutti
in inglese
poi vado a creare una data la data serve
per assegnare una scadenza ai cookie
quindi si usa l'oggetto new Date()
qui vado via un pò veloce perché tutta
cosa che abbiamo già visto quindi data
"settime" poi data "gettime"
e qua prendo allora io dico che voglio
che questo cookies scada fra 30 giorni
quindi come abbiamo già visto fare e si
specifica la date il tempo in
millisecondi quindi millisecondi
millisecondi per 60 secondi per 60
minuti per 24 ore per 30 giorni
ok quindi io qui sto stabilendo che il
mio cookie dovrà scadere fra 30 giorni
adesso vado a creare una variabile
scadenza e qui metto expires che la
prima parte la mia key qui uguale
e poi qui metto data toutcstring
quindi io qui ho il mio valore sotto
forma di data e qui lo vado a convertire
in stringa per poterlo inserire dentro
al cookie fatto questo vado a salvare
il cookie dentro al mio browser facendo
usando la proprietà cookie e scrivendo
allora colore che sarà il nome della
prima key del mio cookie poi qui sarà
sarà inserito il valore inserito
dall'utente quindi colore punto e
virgola poi avrò scadenza punto e
virgola e poi ci sarà la path che in
questo caso metto solo la path di questo
file è chiuso e poi faccio location
reload quindi ricarico la pagina
quindi cosa ho fatto qui
all'inizio quando questa funzione viene
invocata la prima cosa è
vado a controllare se esiste già il
cookie che ha la chiave colore come in
questo caso se il cookie esiste bene
allora
estraggo il valore inserito dall'utente
e vado ad assegnarlo al background in
maniera da colorare se il cookie non
esiste passo qui quindi vado a chiedere
all'utente di inserire un colore
preferito poi creo una data e la una
data del momento di adesso e aggiungo 30
giorni in maniera da assegnare che ha il
cookie valga per 30 giorni e dopo scada e
poi vado a costruire la stringa da
assegnare al cookie e poi la inserisco
dentro al browser e usando document
cookie e ricarico la pagina quando io
ricarico la pagina
questa funzione verrà reinvocata perché
adesso io vado ad assegnarla all'evento
onload che abbiamo già visto che cosa
consiste e quindi metto carica cookie
ecco qua quindi appena la pagina verrà
caricata a questa funzione verra'
invocata quindi qui quando io vado ad inserire il mio cookie dentro al
browser ricarico la pagina ricaricando
la pagina reinvoco la mia funzione e
questa volta entrerò là dentro qui
adesso credo anche una funzione per
cancellare il cookie è la chiamo
function cancella cookie ha scritto
sbagliato qua a function cancella cookie
ora per cancellare un cookie si deve
assegnare una data di scadenza che è già
passata quindi document.cookie e il mio cookie abbiamo detto che ha una chiave
colore uguale allora io posso
sovrascrivere il cookie esistente se io
ho un cookie chi inizia quella chiave
colore posso scriverlo creando un altro
cookie con la chiave colore ed
assegnando un nuovo valore come ad
esempio possono mettere yellow qui ma in
questo caso io voglio cancellare il mio
cookie quindi non assegno nessun valore
e poi vado a dare una scadenza expires
uguale e gli do un valore che è già
passato e quindi io gli do il primo
gennaio 1970 che è l'inizio del timestamp che vi ho già spiegato a mezzanotte
ecco qui utc è poi il punto e
virgola
e poi la path e lo stesso
path ok e poi ricarico la pagina
ancora location.reload
e questa funzione qui l'assegno a un
evento a onclick e dentro il mio
bottone a onclick cancella cookie ok
allora adesso io vado a salvare la
pagina chrome permette
il controllo dei browser della pagina
dentro al tab application
applicazioni persino in italiano e qui
sotto trovate cookie e poi qui troverete
i cookie della pagina quindi adesso io
vado a salvare la pagina e alla pagina
verrà caricata e mi si aprirà un prompt
perché al momento non ho nessun cookie
dentro qui quindi salvo la pagina eccolo
quindi inserire un colore quindi io sono
qui adesso io scrivo scrivo un colore e
lo scrivo in inglese altrimenti non
funziona quindi per esempio verde nel
momento in cui io schiaccio ok
javascript creerà una data di scadenza
fra 30 giorni creerà il mio
cookie lo inserirà dentro al browser
ricaricare la pagina
questa funzione verra' reinvocata e
entrerò dentro qui e javascript
estrarra' il valore che ho inserito e lo
assegnerà al background
andiamo a vedere
non ho sbagliato qualcosa cookie eccolo
qua ho sbagliato la sintassi e anche qua
ahi ahi ahi
allora andiamo a cancellare il valore di
application vado a cancellare comunque
vedete il cookie è stato salvato ma
adesso lo cancello che altrimenti non funziona niente
allora reinserisco ok
ed ecco qua come vedete io ho un cookie
salvato dentro al mio browser con chiave
colore e valore green che poi scadrà fra
30 giorni
è questo qua è il colore assegnato
quindi adesso se io esco dalla pagina e
poi ci rientro mi troverò sempre la
pagina verde per i prossimi 30 giorni
se io voglio cancellare il cookie
schiaccio cliccami e come vedete ho
cancellato il mio cookie ho ricaricato
la pagina nel mio in questo momento non
c'è più il cookie quindi sono tornato
dentro qui e ancora il prompt di
inserito dove posso inserire un altro
colore come rosso e mi trovo la pagina
rossa con questo è tutto ci sentiamo la
prossima ciao