Cargando

Ir a contenido


 


HTML5 - Cookies

En este tutorial hablaremos un poco sobre cómo utilizar el objeto document para escribir y leer una cookie.


Escrito por el nov 20 2013 20:13 objeto document escribir y leer una cookie


Las cookies son pequeñas piezas de datos que se almacenan en el navegador de la persona que visita una página, de forma que se puede tener algunos datos sobre su navegación en alguna página determinada, con ello cuando la persona visita el sitio nuevamente podemos personalizar su experiencia de navegación, ya sea mostrando resultados relacionados a su visita anterior, o mostrando sus datos personales de manera inmediata.

Con HTML5 y el objeto document podemos escribir cookies mediante el lenguaje Javascript, gracias a esto podemos extender la funcionalidad de nuestras páginas, ofreciendo una experiencia de navegación más robusta.

Leer y escribir Cookies

Como mencionamos al inicio, gracias al objeto document podemos hacer el manejo de las cookies, con el siguiente código vamos a hacer un pequeño ejemplo de esto, de forma que podamos entender cómo se realizan los procesos:

<!DOCTYPE HTML>
<html>
<head>
	 <title>Example</title>
	 </head>
<body>
	 <p id="cookiedata">
		 </p>
	 <button id="write">Add Cookie</button>
	 <button id="update">Update Cookie</button>
	 <script>	
		 var cookieCount = 0;
		 document.getElementById("update").onclick = updateCookie;
		 document.getElementById("write").onclick = createCookie;
		 readCookies();

		 function readCookies() {
			 document.getElementById("cookiedata").innerHTML = document.cookie;
		 }
		 function createCookie() {
			 cookieCount++;
			 document.cookie = "Cookie_" + cookieCount + "=Value_" + cookieCount;
			 readCookies();
		 }
			
		 function updateCookie() {
			 document.cookie = "Cookie_" + cookieCount + "=Updated_" + cookieCount;
			 readCookies();				
		 }
	</script>
</body>
</html>


La propiedad cookie trabaja de una forma peculiar, cuando leemos el valor de la propiedad, obtenemos todas las cookies que están asociadas al documento. Las cookies tienen una estructura de duplas nombre/valor y se pueden ver nombre=valor.

Ahora en el momento que varias cookies se obtienen, vamos a ver que las obtendremos separadas por un punto y coma de la siguiente forma: nombre1=valor1;nombre2=valor2;nombre3=valor3. Y así sucesivamente con todas las que tengamos.

Ahora el comportamiento cuando agregamos una cookie es el siguiente, asignamos una nueva dupla nombre/valor como el valor de la propiedad cookie del objeto document y así se agregan las cookies del documento. En este proceso solo podemos añadir una cookie a la vez, si asignamos un valor que corresponde a un nombre cookie existente, esta va a ser actualizada con dicho valor.

Una vez aclarada la forma de trabajo de las cookies vamos a explicar el código que colocamos, vemos que tenemos dos botones en el documento a cada uno se le asignó una función Add Cookie para agregar cookies y Update Cookie para actualizarlas, cuando utilizamos el primero se activa la función createCookie que crea una nueva dupla nombre/valor la cual será añadida a la colección de cookies del documento, el segundo botón llamará a la función updateCookie la cual le asignara un nuevo valor a una cookie existente.

Veamos una captura de pantalla de cómo debería trabajar este código en nuestro navegador:


También tenemos algunas propiedades adicionales que podemos utilizar para el manejo de las cookies, veamos la siguiente lista:
  • path=<ruta> Establece la ruta asociada con la cookie, por defecto es la ruta del documento actual.
  • domain=<dominio> Establece el dominio asociado a la cookie, por defecto toma el valor del dominio del documento actual.
  • max-age=<segundos> Establece la vida de una cookie, se cuenta en segundos, y empieza a contar desde el momento de su creación.
  • expires=<fecha> Establece la fecha de vencimiento de una cookie utilizando la zona horaria GMT. Esta opción solo está disponible para utilizarse sobre una conexión HTTPS.
Para utilizar estas propiedades debemos añadirlas luego de un punto y coma al establecer el valor de la cookie por ejemplo document.cookie = "MyCookie=MyValue;max-age=10";
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado nov 20 2013 20:13
  •   Actualizado nov 20 2013 20:41
  •   Visitas 848
  •   Nivel
    Avanzado



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse