¿Qué son las cookies y cómo trabajar con ellas usando JavaScript?
Al trabajar con aplicaciones a escala industrial, los servidores no pueden recordar detalles sobre su cliente. Una vez que la sesión termina con el cliente, el servidor elimina toda la información sobre el cliente, es por eso que las cookies se almacenan en el lado del cliente. Entonces, la próxima vez, el cliente se comunica con el servidor con una solicitud, se envía una cookie junto con la solicitud para que el servidor ya conozca las preferencias del cliente.
¿Cuáles son los tipos de cookies??
Hay tres tipos diferentes de cookies que son:
- Cookies de sesión: Estas cookies se eliminan automáticamente de sus navegadores una vez que finaliza la sesión con el sitio web
- Cookies de primera parte: Estas son las cookies creadas por un sitio web específico y solo pueden ser leídos por ese sitio web específico
- Cookies de terceros: Estas son las cookies creadas por el anuncio que se ejecuta en un sitio web que podría haber visitado
¿Cuáles son los campos de las cookies??
En general, las cookies parecen pares de valor de nombre, pero consisten en 5 campos diferentes. Estos campos son:
- Nombre = pares de valor: Estas son la versión de cookie de los pares de "valor clave"
- Expirar: Esto define cuándo expirará la cookie del navegador, si no se especifica una fecha de vencimiento con la cookie, la cookie se eliminará cuando el navegador esté cerrado
- Camino: La ruta del sitio web que ha establecido la cookie en el navegador, si la ruta está vacía, eliminar un obstáculo específico puede convertirse en un obstáculo
- Dominio: El nombre de dominio del sitio web que establece la cookie
- Seguro: Si este campo está configurado, entonces la cookie solo puede ser leída por un servidor seguro
Estos son todos los campos variables de una cookie, aparte de la nombre = valor Los pares de todos los demás campos son opcionales
Cómo usar JavaScript para trabajar con cookies?
JavaScript interactúa con las cookies utilizando la siguiente sintaxis:
documento.cookie = "name = value; expire: 01 de enero de 2024; ruta =/;"Para demostrar que el trabajo con cookies vamos a configurar una página web HTML con las siguientes líneas dentro de la página web:
Son todas las galletas!!
Obtenemos la siguiente salida en nuestro navegador:
Ahora que tenemos nuestra configuración HTML, podemos comenzar a trabajar en nuestro código JavaScript. Lo primero que vamos a implementar es la funcionalidad del botón que agregará una cookie a nuestro navegador con las siguientes líneas de código:
$ ("#agregar").hacer clic (function ()documento.cookie = "nombre = cookie deliciosa!";
alerta ("Cookie agregada");
);
Ahora, ejecute el programa y haga clic en el botón que dice "Haga clic para agregar una cookie deliciosa!", Obtendrá la siguiente salida:
Puedes confirmar esta cookie dirigiéndote al Consola del desarrollador> Aplicación> Cookies Y encontrar la cookie que acabamos de crear como se muestra en la imagen a continuación:
Como puede ver en las herramientas del desarrollador, pudimos crear con éxito nuestra cookie. El siguiente paso es leer esta cookie usando JavaScript y alertar al usuario sobre la cookie sobre la presión del botón, lo hacemos utilizando las siguientes líneas de código:
$ ("#show").hacer clic (function ()alerta (documento.Galleta);
);
Haga clic en el botón que dice "Haga clic para mostrar cookies" y obtendrá el siguiente resultado:
Como puede ver, podemos leer la cookie y mostrarla al usuario. Ahora, necesitamos aprender a eliminar una galleta del navegador. Podemos eliminar una cookie sobre el botón Presione utilizando las siguientes líneas de código:
$ ("#eliminar").hacer clic (function ()documento.cookie = "name =; expires = thu, 01 de enero de 1970 00:00:01 GMT";
alerta ("Cookie eliminada");
);
Podemos eliminar las cookies estableciendo su fecha de vencimiento en una fecha pasada y eso es exactamente lo que hemos hecho en el fragmento de código anterior. Ahora, si presiona el botón "Haga clic para eliminar la cookie", obtendrá el siguiente resultado:
Para verificar esta eliminación, haga clic en el botón para mostrar cookies una vez más y obtendrá el siguiente resultado:
Como puede ver, el cuadro de diálogo de alerta no nos muestra ninguna cookies, esto se debe a que pudimos eliminar la cookie con el botón Eliminar con éxito.
Conclusión
Las cookies son pequeños archivos de texto que se almacenan en la computadora del cliente o en el navegador del cliente para notificar al servidor las preferencias del cliente. Hay tres tipos diferentes de cookies, a saber: cookies de sesión, cookies de primera parte y cookies de terceros. Una cookie contiene 5 campos diferentes de los cuales solo uno es obligatorio y los 4 campos restantes son opcionales. Las funciones de cookies se realizan en JavaScript utilizando el documento.Galleta atributo. En esta publicación, aprendimos a trabajar con cookies usando JavaScript.