04 Jun Crear, modificar, eliminar y detectar cookies con Javascript
Una cookie es una variable que permite almacenar informaciones diversas del usuario según sea el interés de los scripts ejecutados durante la navegación por un sitio web.
Estas variables continúan existiendo una vez el usuario sale de nuestra página web siempre y cuando el visitante no las elimine proactivamente.
Las cookies se pueden crear, modificar y eliminar en cualquier momento de la navegación web.
Por ejemplo pueden almacenar el registro de accesos a una página web, la última vez que accedimos, si aceptamos alguna condición, algún carrito de la compra, …
Hay mucha leyenda urbana alrededor de las cookies.
En muchas ocasiones son completamente necesarias para permitir una experiencia de usuario correcta de los visitantes web.
Tipos de cookies
En la política de cookies de cualquier página web que cumpla la RGPD deberíamos poder encontrar esta información. Pueden ser:
Cookies técnicas: Permiten el funcionamiento básico de una página web. Por ejemplo un inicio de sesión para poder comprar en una tienda online.
Cookies de análisis: Permiten a analista digital recoger datos para mejorar la estrategia de marketing y/o mejorar la página web de acuerdo con los intereses de los usuarios.
Cookies publicitarias: Permiten a empresas como Google o Facebook Ads ofrecerte publicidad en base a tu navegación y/o páginas que has visitado.
Como podéis observar no todas las cookies son malas.
Incluso a nivel de cookies publicitarias siempre es preferible recibir información que te interese que no ser impactado con anuncios completamente irrelevantes para ti.
Las cookies también pueden ser clasificadas según:
Cookies de lado servidor: La información se almacena en el servidor dónde está alojada la página web.
Cookies de lado cliente: Las cookies se almacenan en el navegador web. Esto significa en tu mozilla, chrome, opera, explorer... o herramienta que estés utilizando.
En esta publicación me voy a basar en las cookies de lado cliente. Es decir en aquellas que creamos, modificamos, eliminamos y detectamos mediante Javascript.
Como saber que cookies tenemos en nuestro navegador
Accede a una página web cualquiera.
Abre la consola de tu navegador en «Más herramientas» > «herramientas para desarrolladores» y ejecuta la instrucción
document.cookie

En el caso particular de la imagen adjunta se muestran 3 cookies.
Están separadas por ;
Con la instrucción document.cookie.split(«;») generaríamos un array de longitud 3 dónde cada posición almacenaría una cookie.
En esta página google nos explica que es cada una de las cookies y para que las usa.
También podemos saber todas las cookies de todas las páginas web en nuestro navegador accediendo a
«configuración > configuración de contenidos > cookie»
Sin embargo ten en cuenta que el objetivo del tutorial javascript es enseñar este lenguaje de programación 😉
Crear nuestra propia biblioteca de funciones para trabajar con cookies
En programación hay ocasiones en las que no compensa inventar la rueda.
Esta es una de ellas. Permitirme ser práctico.
Si queréis ver proceso desde cero de creación y modificación de cookies podéis hacerlo en el tutorial de cookies del W3schools.
Las cookies tienen un nombre que las definen.
Guardan alguna información.
Tienen definida una fecha de expiración. Si no se indica nada, la cookie se elimina automáticamente al cerrar el navegador. La fecha de expiración se define en formato GMTString (hora de meridiano)
En su caso vamos a crear las bibliotecas de funciones:

Las funciones setCookie() y getCookie() no son mías. Por lo tanto no voy a transcribir el código. Podéis encontrar-lo en W3Schools.
Mi aportación son las funciones removeCookie() y detectCookie().
Adjunto capturas respectivas por si queréis replicarlas.
En realidad veréis que no me complico en exceso y reciclo el código propuesto por W3Schools.


Aviso importante antes de practicar las cookies directamente en tu ordenador
Si estás trabajando con cookies y probando lo leído en esta publicación o otro debes saber algo muy importante:
El navegador por defecto imposibilita la opción de que puedas crear cookies en local y trabajar con ellas.
Esto significa que si quieres hacer pruebas debes hacerlo en un entorno real.
Con tu hosting y subiendo el archivo vía FTP.
Lo sé, ¡menuda faena!
La misma que he tenido yo haciendo pruebas para preparar esta entrada 😉

A continuación te dejo la biblioteca de funciones cookies.js para tu mayor comodidad.
Querido lector,
Y hasta aquí una entrada extensa en la que hemos repasado muchos conceptos relacionados con las cookies.
Espero que os pueda ser de utilidad.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
MIQUEL BORDERA SALADIE
Posted at 19:11h, 24 agostoVaya pues. Menos mal que he encontrado este post. Resulta que llevo casi 3 horas peleándome con mi ordenador porque al abrir un archivo HTML que lleva Javascript para administra unas cookies, éstas no se guardan. En Chrome ni siquiera llegan a crearse y en Internet Explorer se crean pero no permanecen en el tiempo aunque utilice los parámetros de tiempo correspondientes, se borran al cerrar el navegador. Al final es lo que pone aquí, el navegador no acepta cookies de archivos locales.
Para solucionar este problema lo que he hecho ha sido meter el susodicho archivo en la carpeta local htdocs de Apache y ahora si, abriendo el archivo desde el navegador con localhost/miarchivo.html, ahora si que funciona todo bien.
Lo que no entiendo muy bien es porque esta información que tu bien explicas en este post, no aparece en ninguno de los otros muchos tutoriales de cookies que he recorrido durante estas 3 horas para solucionar mi problema, que si te fijas bien es una tontería porque igual yo mismo debería haberme dado cuenta, pero no, te juro que no caí en la cuenta.
Un saludo.
Miquel Bordera Saladie-
Javier Sosa
Posted at 22:37h, 15 junioHay alguna forma de bloquear las cookies antes de que se creen..?
Francesc Ricart
Posted at 00:40h, 17 junioHola Javier,
Puedes hacerlo en la configuración de tu navegador web. Por ejemplo en este enlace encontrarás como hacerlo para chrome.
Saludos,
andres
Posted at 00:22h, 29 eneroes una informacion necesaria que no la encuentras tan facil por eso gracias por la info.
Francesc Ricart
Posted at 13:48h, 22 febrero🙂
andres
Posted at 00:23h, 29 enerome ayudo mucha neta gracias
Francesc Ricart
Posted at 13:48h, 22 febrero¡me alegro!