¿Qué es una Cookie?

que-es-cookie

Una Cookie es un pedazo de información que guarda una página web en un fichero almacenado en el navegador del cliente que accede a la misma. Esta información puede ser guardada, modificada y leída si el navegador del cliente tiene configurada esta opción.

Desde el punto de vista del desarrolador web, se pueden acceder a estos tipos de datos o variables desde el objeto document en JavaScript, mediante el acceso a la propiedad cookie. Es decir, trabajaremos sobre document.cookie.

A continuación mostramos un ejemplo (Nota -> una «cookie» viene definida por una clave y valor).

PASO 1: CONSULTA

 

En este código podemos observar dos funciones, la primera obtenerCookie(nombreCookie) que dado la clave nombreCookie nos devuelve el valor.

checkCookie(nombreCookie) que de momento nos mostrará un mensaje de alerta con el valor de
nombreCookie ya que está función llama a la anterior para mostrar el valor del mismo.

Por lo que crearemos un botón que nos devuelva el valor de nuestra cookie con clave ejemploCookie, es decir, pondremos en su evento onclick la instrucción checkCookie(‘ejemploCookie’);.

Para ejemploCookie se nos presenta por mensaje el valor undefined, es decir, no tiene
un valor definido.

Ahora se nos presenta la necesidad de crear la cookie, por lo que vamos a definir las siguientes funciones:

PASO 2: CONSULTA Y CREACIÓN

En este código podemos observar otras dos funciones, la primera generaCookie(nombreCookie, valorCookie, diasCaducidad) en la cual se le pasa el nombre de la cookie a generar (nombreCookie), el valor de la cookie (valorCookie) y el número de días
que tiene la cookie de expiración en el almacenamiento de cliente (diasCaducidad).

Posteriormente se ha creado checkCookie2(nombreCookie) que dado nombreCookie consultará el valor si lo tiene y si no mostrará una ventana de confirmación para insertar el valor deseado para posteriormente llamar a la función anterior, es decir, generaCookie(nombreCookie, valorCookie, diasCaducidad).

Por lo que vamos a crear un segundo botón que nos devuelva el valor de nuestra cookie con clave ejemploCookie si existe y sino que procede a crearlo, es decir, pondremos en el evento del segundo botón (onclick) la instrucción checkCookie2(‘ejemploCookie’);.

Una vez creada correctamente, podemos consultar en cualquier de los dos botones atenriores.
Nótese: Si se ha fijado nuestra cookie expirará en un día, es decir, durante 24 horas la cookie estará almacenada en su navegador, ¿dónde se ha declarado esta caducidad? Se deja al lector como ejercicio de entendimiento esta pregunta y la implementación de la función eliminarCookie(nombreCookie).

Referencias

JavaScript Cookies from w3schools.com