Breaking News

Home / JavaScript Basico / JavaScript y cookies

JavaScript y cookies

July 05, 2018

JavaScript y cookies

¿Qué son las cookies?


Los navegadores web y los servidores usan el protocolo HTTP para comunicarse y HTTP es un protocolo sin estado. Pero para un sitio web comercial, se requiere mantener información de sesión entre diferentes páginas. Por ejemplo, un registro de usuario finaliza después de completar muchas páginas. Pero cómo mantener la información de sesión de los usuarios en todas las páginas web.
En muchas situaciones, el uso de cookies es el método más eficaz para recordar y rastrear preferencias, compras, comisiones y otra información necesaria para mejorar la experiencia del visitante o las estadísticas del sitio.

Cómo funciona ?


Su servidor envía algunos datos al navegador del visitante en forma de una cookie. El navegador puede aceptar la cookie. Si lo hace, se almacena como un registro de texto sin formato en el disco duro del visitante. Ahora, cuando el visitante llega a otra página en su sitio, el navegador envía la misma cookie al servidor para su recuperación. Una vez recuperado, su servidor sabe/recuerda lo que estaba almacenado anteriormente.
Las cookies son un registro de datos de texto sin formato de 5 campos de longitud variable:
  • Caduca : la fecha de vencimiento de la cookie. Si esto está en blanco, la cookie expirará cuando el visitante salga del navegador.
  • Dominio : el nombre de dominio de su sitio.
  • Ruta : la ruta al directorio o la página web que configura la cookie. Esto puede estar en blanco si desea recuperar la cookie de cualquier directorio o página.
  • Seguro : si este campo contiene la palabra "seguro", la cookie solo se puede recuperar con un servidor seguro. Si este campo está en blanco, no existe tal restricción.
  • Nombre = Valor - Las cookies se configuran y recuperan en forma de pares clave-valor
Las cookies fueron originalmente diseñadas para programación CGI. Los datos contenidos en una cookie se transmiten automáticamente entre el navegador web y el servidor web, por lo que los scripts CGI en el servidor pueden leer y escribir valores de cookies que se almacenan en el cliente.
JavaScript también puede manipular las cookies utilizando la propiedad cookie del objeto Documento . JavaScript puede leer, crear, modificar y eliminar las cookies que se aplican a la página web actual.

Almacenamiento de cookies


La forma más sencilla de crear una cookie es asignar un valor de cadena al objeto document.cookie, que se ve así.
document.cookie = "key1=value1;key2=value2;expires=date";
Aquí el atributo expira es opcional. Si proporciona este atributo con una fecha u hora válida, la cookie caducará en una fecha u hora determinada y, a partir de entonces, no se podrá acceder al valor de las cookies.
Nota : los valores de las cookies no pueden incluir punto y coma, comas o espacios en blanco. Por este motivo, es posible que desee utilizar la función JavaScript escape() para codificar el valor antes de almacenarlo en la cookie. Si hace esto, también deberá usar la función unescape() correspondiente cuando lea el valor de la cookie.

Ejemplo


Prueba lo siguiente. Establece un nombre de cliente en una cookie de entrada.
<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>

Salida


Ahora su máquina tiene una cookie llamada nombre . Puede establecer múltiples cookies usando múltiples pares de clave = valor separados por comas.

Lectura de cookies

Leer una cookie es tan simple como escribir una, porque el valor del objeto document.cookie es la cookie. Entonces puede usar esta cadena cada vez que quiera acceder a la cookie. La cadena document.cookie mantendrá una lista de pares nombre = valor separados por punto y coma, donde nombre es el nombre de una cookie y el valor es su valor de cadena.
Puede utilizar la función de cadenas split() para dividir una cadena en clave y valores de la siguiente manera:

Ejemplo


Pruebe el siguiente ejemplo para obtener todas las cookies.
<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>
Nota : aquí length es un método de la clase Array que devuelve la longitud de una matriz. Discutiremos Arrays en un capítulo separado. Para ese momento, intente digerirlo.

Nota : puede haber algunas otras cookies ya configuradas en su máquina. El código anterior mostrará todas las cookies establecidas en su máquina.

Configuración de fecha de caducidad de las cookies

Puede prolongar la vida útil de una cookie más allá de la sesión actual del navegador estableciendo una fecha de vencimiento y guardando la fecha de caducidad dentro de la cookie. Esto se puede hacer estableciendo el atributo 'expira' en una fecha y hora.

Ejemplo


Prueba el siguiente ejemplo. Ilustra cómo ampliar la fecha de caducidad de una cookie en 1 mes.
<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>

Salida


Eliminar una cookie


Algunas veces querrá eliminar una cookie para que los intentos posteriores de leer la cookie no devuelvan nada. Para hacer esto, solo necesita establecer la fecha de caducidad a un tiempo en el pasado.

Ejemplo

Prueba el siguiente ejemplo. Ilustra cómo eliminar una cookie estableciendo su fecha de caducidad a un mes detrás de la fecha actual.

<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>

Salida



No comments

Subscribe to: Post Comments ( Atom )