Crear, modificar, eliminar y detectar cookies con Javascript

Crear, modificar, eliminar y detectar cookies con Javascript

Print Friendly, PDF & Email
Crear, modificar, eliminar y detectar cookies con Javascript
Valora esta entrada
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

instrucción document.cookie
Ejemplo de uso de 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:

código funciones javascript para cookies
Biblioteca de funciones para trabajar con cookies

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.

Función para detectar si una cookie existe
Función para detectar si una cookie existe
Función para eliminar una cookie con javascript
Función para eliminar una cookie con javascript

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 😉

https://stackoverflow.com/questions/8105135/cannot-set-cookies-in-javascript

Y hasta aquí una entrada extensa en la que hemos repasado muchos conceptos relacionados con las cookies.

Espero que os pueda ser de utilidad.

¡Hasta mañana!

Entradas relacionadas:

Ejercicio – Sumas con letras
- 104
En este ejercicio vemos de forma práctica si la suma de valores numéricos o strings resulta en una suma o una concatenación.
Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS
- 85
Ejemplo de programación de un script que devuelve una hora con formato personalizado hh:mm:ss.
Ejercicio – ¿Estamos en fin de semana?
- 83
Ejercicio dónde se resuelve un simple ejercicio mediante el uso de getDay() y se compara un switch y un if. Incluye solución.
Ejercicio JS – Susto emergente
- 22
Ejemplo de programación de una ventana emergente con Javascript. Incluye solución. Serie de ejercicios tutorial javascript del curso ifcd0110
Ejercicio JS – Crear un cronómetro con javascript
- 36
Completo cronómetro JS dónde se usa setInterval, addEventListener, removeEventListener y se repasan conceptos de CSS. Incluye solución.
3 formas de cambiar la ubicación de búsqueda en Google
- 144
En esta entrada encontrarás 3 formas distintas de modificar tu ubicación de búsqueda en google sin necesidad de que te tengas que desplazar.
Eliminar el comportamiento por defecto de un elemento html
- 229
Explicamos como desactivar el comportamiento por defecto de un elemento HTML mediante el uso del método javacript preventDefault()
Palabras reservadas que no se deben usar para declarar variables
- 167
Listado de palabras reservadas en Javascript de acuerdo con el último stándard ECMA Script 6.
La etiqueta noscript
- 248
El desconocimiento hace que a menudo muchos usuarios decidan desactivar la opción de que nuestra navegador acepte y/o interprete este lenguaje de script. ¿Que podemos hacer para avisar a los usuarios ...
Ejercicio JS – Salva pantallas primitivo con javascript
- 30
Ejercicio de salvapantallas primitivo creado con javascript básico y sin usar la etiqueta canvas. Incluye solución.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.