Trabajar con cookies en Javascript

En este artículo aprenderemos a trabajar con cookies en javascript, qué son las cookies, como crearlas, modificarlas, eliminarlas y leerlas.

Antes de empezar a trabajar con cookies en javascript, es muy conveniente entender el concepto de cookie.

Qué son las cookies

Las cookies son pequeñas porciones de información o paquetes de datos que se generan en el servidor (sitio web visitado) y que el navegador guarda de forma automática en el ordenador del usuario que visita la web.

Una cookie es un string o cadena de texto que contiene parejas parametro=valor separadas por ; de la siguiente forma:

Para qué sirven las cookies

Las cookies sirven principalmente para almacenar las preferencias del usuario (idioma, productos…)  de manera que puede controlarse el acceso de los usuarios a ciertas partes de un sitio web y mostrarle la información particular de ese usuario o bien mejorar la experiencia de usuario mostrando la información parecida a la que está buscando.

Cómo se utilizan las cookies en javascript

Aunque las cookies se envían y reciben en las cabeceras HTTP, se pueden manejar en el lado del cliente con Javascript, vamos a ver como podemos crear, leer, modificar y eliminar cookies en javascript de manera sencilla.

1- Crear cookies en javascript

Con simple código podemos crear una cookie en Javascript.Simplemente tenemos que crear el string que define la cookie y asignarlo a document.cookie.

Los cookies son pares de clave:valor, es decir, se define una clave que será por la que se buscará y se recuperará su valor. Para crear nuevas cookies en JavaScript, se puede hacer mediante la siguiente asignación:

Las cookies se envían en las cabeceras HTTP por lo que deben estar correctamente codificadas. Puede utilizarse encodeURIComponent(), es una buena costumbre para evitar sorpresas:

2- Modificar cookies en javascript

Para modificar una cookie en JavaScript, bastará con volverla a definir, de la misma manera que se ha hecho al crearla.

Por ejemplo, podemos crear la siguiente cookie con identificador nombre y valor Nacho:

Si queremos modificar el valor, por ejemplo cambiarlo por Marcos:

3- Eliminar cookies en javascript

No hay ningún comando para las cookies en javascript, lo que hay que hacer es volver a definirlas con una fecha que ya haya pasado. De esta forma, el sistema detectará que ha pasado la fecha y automáticamente la descartará.

Para este caso, creamos la cookie con el identificador nombre y valor Nacho como en el ejemplo anterior:

Para proceder a su eliminación encontramos dos formas de hacerlo:

Es importante aclarar que para la eliminación de la cookie el path y el dominio en caso de introducirlos también que coincidir:

4- Leer cookies en javascript y obtener su valor

Podría decirse que no hay un método directo para leer las cookies individualmente, ya que la única forma de hacerlo es obtener un string con todas las cookies válidas de la siguiente manera:

Esta variable recogería todas las cookies y tendría el siguiente formato:

De esta manera obtendríamos todas las cookies pero… ¿Y si quisiéramos leer cada cookie individual? Para ello recurrimos a nuestros conocimientos de programación, pues nos va a tocar manipular el string con todas las cookies y dividirlo por cada ; para separar cada par nombrecookie=valor. Luego se divide cada uno de estos pares por =para separar el nombre de la cookie y su valor.

Veamos una forma de realizar esto:

Qué información puede guardar una cookie

Las cookies no pueden almacenar información personal, ya que incurrirían en una ilegalidad con respecto a la ley de protección de datos. Hay otro tipo de datos, sin embargo que sí que pueden guardar a fin de mejorar la experiencia del usuario internauta, veamos algunos ejemplos:

Almacenar la fecha de la primera visita. Podría optarse por adaptar el contenido según la antiguedad del usuario que busca en la web:

Almacenar las visitas realizadas. Con un sencillo contador es posible almacenar la cantidad de veces que un usuario regresa a una página web en particular. Se utiliza mucho para hacer ofertas más agresivas o descuentos a usuarios que visiten repetidamente una ficha de producto concreta.

Customizar contenido según sexo, edad y profesión. Suena absurdo, pero es posible. Si utilizas campañas en la red de Display de Adwords, puedes enfocar una campaña para mujeres y otras para hombres, siempre que estén logueados en Gmail. A cada campaña le asignarás su propia URL destino:

A continuación, este código te permitirá insertar el valor en la cookie.

¿Ves las posibilidades? En Google Adwords, puedes segmentar por sexo y edad. En Linkedin Ads, puedes segmentar por edad, sexo, profesión, instituto educativo, puesto laboral, zona de residencia, etc. En Facebook Ads, además de lo anterior, puedes segmentar incluso por estado civil y etnia. Por cada variable segmentable, puedes crear una nueva cookie para mostrar contenido personalizado cada vez que el usuario regrese. A diferencia de la sesión en PHP, la cookie no expira inmediatamente.

Almacenar variables de ValueTrack. Mediante el etiquetado ValueTrack de Adwords, es posible almacenar variables tan específicas como tipo de concordancia, red, dispositivo, modelo del dispositivo, creatividad del anuncio, keyword, dominio de la primera visita, ID del producto para campañas orientadas a un producto específico, y muchos otros detalles.

Mantener el primer referido. Esto es una alternativa al “nooverride” de Google, que tiene el bug de sobreescribir valores antiguos con tráfico orgánico proveniente de su motor de búsqueda. Así almacenarás el origen de la primera visita de ese usuario.

Almacenar IP. Añadiendo el código de mi anterior artículo “Cómo ver la IP de un visitante en Google Analytics”, puedes también almacenar IP, mientras no se considere información personal y sea por cuestiones de seguridad.

EJEMPLO  DE COOKIES EN JAVASCRIPT

Hemos visto como se crean, modifican, eliminan y leen cookies en javascript. Vamos a ver un ejemplo completo que aglutine todos estos conceptos.

Conclusión

En este artículo hemos aprendido el concepto de cookie y cómo trabajar con cookies en javascript.

 

Summary
Trabajar con cookies en javascript
Artículo
Trabajar con cookies en javascript
Descripción
En este artículo aprenderemos a utilizar y trabajar las cookies en javascript, cómo crearlas, leerlas, modificarlas y eliminarlas.
Autor
Si te sirve de ayuda, no dudes en compartir!Share on LinkedInShare on FacebookTweet about this on TwitterPin on PinterestShare on Google+

2 comments to this article

  1. Asdeideas Diseño Madrid

    on 7 septiembre, 2017 at 8:06 am - Responder

    Post muy bueno y completo. Muchísimas gracias por la aportación, es de mucha ayuda! Buen trabajo!

    • nacho

      on 14 septiembre, 2017 at 7:50 am - Responder

      Gracias, espero que pueda servir.

Deja un comentario