Cosa sono i cookie e come lavorare con loro usando JavaScript

I cookie sono dati archiviati all'interno di file di testo piccoli e molto gestibili, i cookie vengono utilizzati per raccontare al server le preferenze del client e altre informazioni. I cookie sono principalmente memorizzati sul computer del client o nella memoria del browser del client.

Quando lavorano con applicazioni su scala industriale, i server non possono ricordare i dettagli sul proprio cliente. Una volta terminata la sessione con il client, il server rimuove tutte le informazioni sul client, ecco perché i cookie sono archiviati sul lato client. Quindi, la prossima volta, il client raggiunge il server con una richiesta, un cookie viene inviato insieme alla richiesta in modo che il server conosca già le preferenze del client.

Quali sono i tipi di biscotti?

Esistono tre diversi tipi di cookie che sono:

• Cookie di sessione: Questi cookie vengono eliminati automaticamente dai browser una volta terminata la sessione con il sito Web
• Cookie di prima parte: Questi sono i cookie creati da un sito Web specifico e possono essere letti solo da quel sito Web specifico
• Cookie di terze parti: Questi sono i cookie creati dalla pubblicità in esecuzione su un sito Web che potresti aver visitato

Quali sono i campi dei biscotti?

Generalmente, i cookie sembrano coppie di valore di nome, ma sono costituiti da 5 campi diversi. Questi campi sono:

• Nome = coppie di valori: Queste sono la versione per biscotti delle coppie di "valore chiave"
• Scade: Questo definisce quando il cookie scadrà dal browser, se non viene specificata la data di scadenza con il cookie, il cookie verrà eliminato quando il browser è chiuso
• Sentiero: Il percorso del sito Web che ha impostato il cookie nel browser, se il percorso è vuoto, quindi eliminare uno specifico può diventare un ostacolo
• Dominio: Il nome di dominio del sito Web che imposta il cookie
• Sicuro: Se questo campo è impostato, il cookie può essere letto solo da un server sicuro

Questi sono tutti i campi variabili di un biscotto, a parte il nome = valore coppie tutti gli altri campi sono opzionali

Come usare JavaScript per lavorare con i cookie?

I cookie sono interagiti da JavaScript utilizzando la seguente sintassi:

documento.cookie = "name = value; scade: 01 gennaio 2024; percorso =/;"

Per dimostrare il lavoro con i cookie, imposteremo una pagina Web HTML con le seguenti righe all'interno della pagina Web:

Sono tutti biscotti!!

Fare clic per aggiungere un guscio delizioso!
Fai clic per mostrare i cookie
Fare clic per eliminare il cookie

Ottiamo il seguente output sul nostro browser:

Ora che abbiamo la nostra configurazione HTML possiamo iniziare a lavorare sul nostro codice JavaScript. La prima cosa che implementeremo è la funzionalità del pulsante che aggiungerà un cookie al nostro browser con le seguenti righe di codice:

$ ("#aggiungi").Click (function ()
documento.cookie = "name = gustoso cookie!";
Avviso ("Cookie aggiunto");
);

Ora, esegui il programma e fai clic sul pulsante che dice "Fai clic per aggiungere un cookie delizioso!", Otterrai il seguente output:

Puoi confermare questo cookie andando al Console dello sviluppatore> Applicazione> Cookie e trovare il cookie che abbiamo appena creato proprio come mostrato nell'immagine qui sotto:

Come puoi vedere dagli strumenti dello sviluppatore, siamo stati in grado di creare con successo il nostro cookie. Il prossimo passo è leggere questo cookie usando JavaScript e avvisare l'utente del cookie al momento della pressione del pulsante, lo facciamo utilizzando le seguenti righe di codice:

$ ("#show").Click (function ()
Avviso (documento.biscotto);
);

Fai clic sul pulsante che dice "Fai clic per mostrare i cookie" e otterrai il seguente risultato:

Come puoi vedere, possiamo leggere il cookie e visualizzarlo all'utente. Ora, dobbiamo imparare a eliminare un cookie dal browser. Possiamo eliminare un cookie al momento della pressione del pulsante utilizzando le seguenti righe di codice:

$ ("#elimina").Click (function ()
documento.cookie = "name =; scade = thu, 01 gennaio 1970 00:00:01 GMT";
Avviso ("Cookie Eliminated");
);

Possiamo eliminare i cookie impostando la data di scadenza fino a una data passata ed è esattamente quello che abbiamo fatto nello snippet di codice sopra. Ora, se si preme il pulsante "Fai clic per eliminare il cookie" otterrai il seguente risultato:

Per verificare questa eliminazione, fai clic sul pulsante per mostrare ancora una volta i cookie e otterrai il seguente risultato:

Come puoi vedere, il dialogo di avviso non ci mostra cookie, questo perché siamo stati in grado di eliminare il cookie usando il pulsante Elimina correttamente.

Conclusione

I cookie sono piccoli file di testo che vengono archiviati sul computer del client o sul browser del client per avvisare il server delle preferenze del client. Esistono tre diversi tipi di cookie, vale a dire: cookie di sessione, biscotti di prima parte e biscotti di terze parti. Un cookie contiene 5 campi diversi di cui solo uno è obbligatorio e i restanti 4 campi sono opzionali. Le funzioni dei cookie vengono eseguite in JavaScript utilizzando il documento.biscotto attributo. In questo post, abbiamo imparato a lavorare con i cookie usando JavaScript.