Cómo configurar, verificar y leer un valor de cookie con JavaScript?
Hablaremos sobre cómo configurar, verificar y leer un valor de cookie con JavaScript en este artículo. Sin embargo, antes de ir más allá, permítanme enfatizar en el punto de que las cookies no deben usarse para almacenar información crítica/confidencial, como contraseñas o detalles de su tarjeta de crédito, ya que las personas maliciosas podrían acceder a ellas.
Creando una cookie
El documento.Galleta La propiedad crea, lee y elimina las cookies y esta es la propiedad, que representa todas las cookies conectadas con un documento. Para crear una cookie primero, debemos saber que las cookies se guardan en pares de valor de nombre, por ejemplo:
nombre de usuario = Obama;Ahora creamos una cookie en JavaScript:
documento.Cookie = "UserName = Obama";La vida útil de una cookie se establece con la duración de la sesión actual del navegador, lo que significa que expira cuando el usuario cierra el navegador. Para resolver este problema usamos el máximo de la edad atributo que asegura que la cookie persista más allá de la sesión actual del navegador. En el atributo máximo de la edad, podemos especificar la vida útil de una cookie en segundos i-e ¿cuánto tiempo permanecerá la cookie antes de que se elimine. La vida útil de la cookie en el siguiente código es de 30 días:
documento.Cookie = "Username = Obama; max-edad =" + 30*24*60*60;También podemos usar el expirar atributo que toma la fecha exacta en lugar de segundos en el formato GMT/UTC y en esa fecha la cookie expira:
documento.Cookie = "UserName = Obama; expiras = Jue, 26 de septiembre de 2021 12:00:00 UTC";Otro atributo que podemos usar en la creación de Cookie es el camino atributo que le dice al navegador a qué ruta pertenece la cookie en lugar de la ruta predeterminada, que es la página actual.
documento.Cookie = "UserName = Obama; expires = thu, 26 de septiembre de 2021 12:00:00 utc; ruta =/";Tenemos que usar el JavaScript encodeuricomponent () Como el valor de la cookie contiene comas, semicolones y espacios y el encodeuricponneenet () Asegura que la cadena no contenga las comas, las semicolones y los espacios, ya que no están permitidos en las cookies.
documento.cookie = "username =" + encodeuricomponent ("obama");Reading Cookie
Podemos leer o obtener todas las cookies de un dominio actual utilizando el documento.Galleta:
var x = documento.Galleta;Al igual que en la creación de una cookie que usamos encodeuricomponent () Al leer una cookie tenemos que usar DecodeuricOpongeNet ():
documento.Cookie = "UserName =" + DecodeuriComponent ("Obama");Eliminar cookie
También podemos eliminar una cookie y en JavaScript, el proceso es muy simple, ya que no tenemos que especificar algún valor de cookie, sino que podemos usar el parámetro expirar y actualizarlo utilizando una fecha anterior, por ejemplo:
documento.Cookie = "UserName = Obama; expires = thu, 20 de noviembre de 2018 12:00:00 utc; ruta =/";
Eliminar cookie
También podemos eliminar una cookie y en JavaScript, el proceso es muy simple, ya que no tenemos que especificar algún valor de cookie, sino que podemos usar el parámetro expirar y actualizarlo utilizando una fecha anterior, por ejemplo:
documento.Cookie = "UserName = Obama; expires = thu, 20 de noviembre de 2018 12:00:00 utc; ruta =/";Ejemplo de cookies en JavaScript
Ahora que sabemos qué es una cookie, cómo crear o leer una cookie, combinemos todo lo que hemos aprendido y creemos una cookie que almacene un nombre cada vez que un usuario visita nuestro sitio web. Tomaremos un nombre de entrada del usuario cuando el usuario ingrese a nuestro sitio web por primera vez y lo almacenaremos en una cookie. Cuando el usuario ingrese al sitio web nuevamente, él/ella recibirá un mensaje de bienvenida en el sitio web.
Para implementar el ejemplo anterior, necesitaremos 3 funciones en las que una de las funciones establecerá una cookie, uno leerá/obtendrá un valor de cookie y la última función verificará el valor de la cookie.
Establecer la función de cookies
función setcookie (nombre de usuario, valor, vencimiento)const fecha = nueva fecha ();
fecha.Settime (fecha.getTime () + (vencimiento * 24 * 60 * 60 * 1000));
var expires = "expires ="+fecha.toutCString ();
documento.Cookie = UserName + "=" + Value + ";" + expiras + "; ruta =/";
Obtener la función de cookie
function getCookie (nombre de usuario)Let Name = UserName + "=";
Spli = documento.Galleta.dividir(';');
para (var j = 0; j < spli.length; j++)
Sea char = spli [j];
Mientras (Char.charat (0) == ")
char = char.subcadena (1);
if (char.indexOf (nombre) == 0)
devolver charle.subcadena (nombre.longitud, char.longitud);
devolver "";
Para obtener una sola cookie, utilizamos el método dividido que desglosará los pares de valor name y luego buscará el nombre que queremos.
Verifique la función de las cookies
función checkcookie ()Var user = getCookie ("nombre de usuario");
// verificar si el usuario es nulo o no
if (usuario != "")
// Si el usuario no es nulo, entonces alerta
alerta ("bienvenido de nuevo" + usuario);
// Si el usuario es nulo
demás
// Tome la entrada del usuario
user = solicit ("Ingrese su nombre:", "");
// establecer cookie
if (usuario != "" && user != nulo)
setcookie ("nombre de usuario", usuario, 365);
checkcookie ();
Check Cookie simplemente verifica si el nombre existe o no I-E si el usuario ha visitado por primera vez nuestro sitio o no. Se verifica primero llamando al método getcookie () que verifica si el nombre de usuario existe o no y luego si existe muestra el mensaje de bienvenida con el nombre del usuario. Si el nombre de usuario no existe, entonces llama al método setcookie () y el usuario entra el nombre y la cookie está configurada.
A continuación se muestran las capturas de pantalla de cuando visité el sitio por primera vez:
A continuación se muestra la captura de pantalla que muestra el nombre que configuré después de actualizar la página:
Conclusión
Una cookie es un pequeño archivo de texto que consta de información sobre un usuario y es un paquete de datos que una computadora recibe y luego envía de vuelta sin alterarlo o cambiarlo. Las cookies del navegador ayudan a realizar un seguimiento de las visitas al usuario y las actividades del usuario. Por ejemplo, ha agregado algunos artículos a su carrito y está explorando el sitio y fue a otra página o lo refresca accidentalmente, sin cookies su carrito se quedaría vacío. Miramos cómo establecer, verificar y leer cookies en JavaScript con ejemplos en esta publicación.