ES6 - Cookie

I browser Web e i server utilizzano il protocollo HTTP per comunicare. HTTP è un protocollo senza stato, ovvero non conserva i dati del client su più richieste effettuate dal client. Questo ciclo completo richiesta-risposta tra il client e il server è definito come un filesession. I cookie sono il meccanismo predefinito utilizzato dai browser per memorizzare i dati relativi alla sessione di un utente.

Come funziona?

Il tuo server invia alcuni dati al browser del visitatore sotto forma di cookie. Il browser può accettare il cookie. In caso affermativo, viene memorizzato come record di testo normale sul disco rigido del visitatore. Ora, quando il visitatore arriva a un'altra pagina del tuo sito, il browser invia lo stesso cookie al server per il recupero. Una volta recuperato, il tuo server sa / ricorda cosa è stato memorizzato in precedenza.

I cookie sono record di dati in testo semplice di 5 campi di lunghezza variabile.

  • Expires- La data in cui scadrà il cookie. Se questo è vuoto, il cookie scadrà quando il visitatore chiude il browser.

  • Domain - Il nome di dominio del tuo sito.

  • Path- Il percorso della directory o della pagina web che imposta il cookie. Questo può essere vuoto, se desideri recuperare il cookie da qualsiasi directory o pagina.

  • Secure- Se questo campo contiene la parola "secure", il cookie può essere recuperato solo con un server sicuro. Se questo campo è vuoto, non esiste alcuna restrizione di questo tipo.

  • Name = Value - I cookie vengono impostati e recuperati sotto forma di coppie chiave-valore.

I cookie sono stati originariamente progettati per la programmazione CGI. I dati contenuti in un cookie vengono automaticamente trasmessi tra il browser Web e il server Web, in modo che gli script CGI sul server possano leggere e scrivere i valori dei cookie che vengono memorizzati sul lato client.

JavaScript può anche manipolare i cookie utilizzando la proprietà cookie dell'oggetto Document. JavaScript può leggere, creare, modificare ed eliminare i cookie che si applicano alla pagina web corrente.

Memorizzazione dei cookie

Il modo più semplice per creare un cookie è assegnare un valore stringa al file document.cookie oggetto, che assomiglia a questo.

"document.cookie = "key1 = value1; key2 = value2; expires = date";

In questo caso, l'attributo "scadenza" è facoltativo. Se fornisci a questo attributo una data o un'ora valida, il cookie scadrà alla data o all'ora specificate e, successivamente, il valore del cookie non sarà accessibile.

Note- I valori dei cookie non possono includere punto e virgola, virgole o spazi bianchi. Per questo motivo, potresti voler utilizzare JavaScriptescape()funzione per codificare il valore prima di memorizzarlo nel cookie. Se lo fai, dovrai anche usare il corrispondenteunescape() quando leggi il valore del cookie.

Esempio

<html> 
   <head> 
      <script type = "text/javascript">  
         function WriteCookie() {  
            if( document.myform.customer.value == "" ){  
               alert ("Enter some value!");  
               return;  
            }  
            cookievalue =  escape(document.myform.customer.value) + ";";  
            document.cookie = "name = " + cookievalue;  
            document.write ("Setting Cookies : " + "name = " + cookievalue );  
         }  
      </script> 
   </head> 
      
   <body> 
      <form name = "myform" action = ""> 
         Enter name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set" onclick = "WriteCookie();"/> 
      </form> 
   </body> 
</html>

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

Ora la tua macchina ha un cookie chiamato nome. È possibile impostare più cookie utilizzando più coppie chiave = valore separate da virgola.

Lettura dei cookie

Leggere un cookie è semplice come scriverne uno, perché il valore di document.cookieoggetto è il cookie. Quindi puoi usare questa stringa ogni volta che vuoi accedere al cookie. Ildocument.cookie string manterrà un elenco di coppie nome = valore separate da punto e virgola, dove il nome è il nome di un cookie e il valore è il suo valore stringa.

Puoi usare le stringhe ' split() funzione per suddividere una stringa in chiave e valori come mostrato nell'esempio seguente.

Esempio

<html> 
   <head> 
      <script type = "text/javascript"> 
         function ReadCookie() {  
            var allcookies  =  document.cookie;  
            document.write ("All Cookies : " + allcookies ); 
         } 
         // Get all the cookies pairs in an array  
         cookiearray = allcookies.split(';');  
         
         // Now take key value pair out of this array  
         for(var i = 0; i<cookiearray.length; i++) {  
            name  =  cookiearray[i].split('=')[0];  
            value = cookiearray[i].split('=')[1];  
            document.write ("Key is : " + name + " and Value is : " + value); 
         }  
      </script> 
   </head> 

   <body> 
      <form name = "myform" action = ""> 
         <p> click the following button and see the result:</p> 
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/> 
      </form> 
   </body> 
</html>

Note - Qui, length è un metodo della classe Array che restituisce la lunghezza di un array.

Potrebbero esserci altri cookie già impostati sulla tua macchina. Il codice sopra mostrerà tutti i cookie impostati sulla tua macchina.

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

Impostazione della data di scadenza dei cookie

È possibile prolungare la durata di un cookie oltre la sessione corrente del browser impostando una data di scadenza e salvando la data di scadenza all'interno del cookie. Questo può essere fatto impostando l'attributo "expires" su una data e un'ora. L'esempio seguente illustra come estendere la data di scadenza di un cookie di 1 mese.

Esempio

<html> 
   <head> 
      <script type = "text/javascript"> 
         function WriteCookie() {  
            var now = new Date();  
            now.setMonth( now.getMonth() + 1 );  
            cookievalue = escape(document.myform.customer.value) + ";"  
            document.cookie = "name = " + cookievalue;  
            document.cookie = "expires = " + now.toUTCString() + ";"  
            document.write ("Setting Cookies : " + "name = " + cookievalue );  
         } 
      </script> 
   </head> 

   <body> 
      <form name = "formname" action = ""> 
         Enter Cookie Name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/> 
      </form> 
   </body> 
</html>

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.

Eliminazione di un cookie

A volte potresti voler eliminare un cookie in modo che i successivi tentativi di leggere il cookie non restituiscano nulla. Per fare ciò, è sufficiente impostare la data di scadenza su un tempo nel passato. Il seguente esempio illustra come eliminare un cookie impostando la sua data di scadenza a un mese prima della data corrente.

Esempio

<html> 
   <head> 
      <script type = "text/javascript"> 
         function WriteCookie() {  
            var now = new Date();  
            now.setMonth( now.getMonth() - 1 );  
            cookievalue = escape(document.myform.customer.value) + ";" 
            document.cookie = "name=" + cookievalue;  
            document.cookie = "expires = " + now.toUTCString() + ";"  
            document.write("Setting Cookies : " + "name = " + cookievalue );  
         }  
      </script> 
   </head> 

   <body> 
      <form name = "formname" action = ""> 
         Enter Cookie Name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/> 
      </form> 
   </body> 
</html>

Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.