JavaScript e cookie

Cosa sono i cookie?

I browser e i server Web utilizzano il protocollo HTTP per comunicare e HTTP è un protocollo senza stato. Ma per un sito web commerciale, è necessario mantenere le informazioni sulla sessione tra pagine diverse. Ad esempio, la registrazione di un utente termina dopo aver completato molte pagine. Ma come mantenere le informazioni sulla sessione degli utenti in tutte le pagine web.

In molte situazioni, l'utilizzo dei cookie è il metodo più efficiente per ricordare e tracciare preferenze, acquisti, commissioni e altre informazioni necessarie per una migliore esperienza dei visitatori o statistiche del sito.

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 un record di dati di 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 ha impostato 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 trasmessi automaticamente tra il browser Web e il server Web, in modo che gli script CGI sul server possano leggere e scrivere i valori dei cookie memorizzati sul client.

JavaScript può anche manipolare i cookie utilizzando il cookie proprietà del Documentoggetto. 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 all'oggetto document.cookie, che ha questo aspetto.

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

Qui il file expiresl'attributo è facoltativo. Se fornisci a questo attributo una data o un'ora valida, il cookie scadrà in una determinata data o ora 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

Prova quanto segue. Imposta un nome cliente in un cookie di input.

<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 Cookie" onclick = "WriteCookie();"/>
      </form>   
   </body>
</html>

Produzione

Ora la tua macchina ha un cookie chiamato name. È 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 dell'oggetto document.cookie è il cookie. Quindi puoi usare questa stringa ogni volta che vuoi accedere al cookie. La stringa document.cookie manterrà un elenco di coppie nome = valore separate da punto e virgola, dovename è 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 segue:

Esempio

Prova il seguente esempio per ottenere tutti i cookie.

<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 di Arrayclasse che restituisce la lunghezza di un array. Discuteremo gli array in un capitolo separato. A quel punto, cerca di digerirlo.

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

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 il‘expires’ attribuire a una data e ora.

Esempio

Prova il seguente esempio. Illustra come estendere la data di scadenza di un cookie di 1 mese.

<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 = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

Produzione

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.

Esempio

Prova il seguente esempio. Illustra come eliminare un cookie impostando la sua data di scadenza a un mese prima della data corrente.

<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 = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

Produzione