Cookies de JavaScript

Tabla de contenido

    Mostrar tabla de contenidos

Las cookies le permiten almacenar información del usuario en páginas web.

¿Qué son las cookies?

Las cookies son datos almacenados en pequeños archivos de texto en su computadora.

Cuando un servidor web ha enviado una página web a un navegador, la conexión se interrumpe. se cierra y el servidor se olvida de todo sobre el usuario.

Las cookies se inventaron para resolver el problema "cómo recordar información sobre el usuario":

  • Cuando un usuario visita una página web, su nombre puede almacenarse en una cookie.

  • La próxima vez que el usuario visite la página, la cookie "recordará" su nombre.

Las cookies se guardan en pares nombre-valor como:

username = John Doe

Cuando un navegador solicita una página web desde un servidor, las cookies que pertenecen a la página se agregan a la solicitud. De esta manera el servidor obtiene los datos necesarios para "recordar" información sobre los usuarios.

Ninguno de los ejemplos siguientes funcionará si su navegador tiene desactivada la compatibilidad con cookies locales.

Crear una cookie con JavaScript

JavaScript puede crear, leer y eliminar cookies con document.cookie propiedad.

Con JavaScript, se puede crear una cookie así:

document.cookie = "username=John Doe";

También puede agregar una fecha de vencimiento (en hora UTC). Por defecto, la cookie se elimina cuando se cierra el navegador:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

Con un parámetro de ruta, puede indicarle al navegador a qué ruta pertenece la cookie. Por defecto, la cookie pertenece a la página actual.

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Leer una cookie con JavaScript

Con JavaScript, las cookies se pueden leer así:

let x = document.cookie;

document.cookie devolverá todas las cookies en una cadena muy parecida a: cookie1=valor; galleta2=valor; galleta3=valor;

Cambiar una cookie con JavaScript

Con JavaScript, puedes cambiar una cookie de la misma manera que la creas:

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

La cookie antigua se sobrescribe.

Eliminar una cookie con JavaScript

Eliminar una cookie es muy sencillo.

No es necesario especificar un valor de cookie cuando elimina una cookie.

Simplemente configure el parámetro de caducidad en una fecha pasada:

document.cookie = "username=; expires=Thu, 01 
Jan 1970 00:00:00 UTC; path=/;";

Debe definir la ruta de las cookies para asegurarse de eliminar la cookie correcta.

Algunos navegadores no le permitirán eliminar una cookie si no especifica la ruta.

La cadena de galletas

La propiedad document.cookie parece una cadena de texto normal. Pero no lo es.

Incluso si escribe una cadena de cookies completa en document.cookie, cuando la lea nuevamente, solo podrá ver la par nombre-valor del mismo.

Si configura una cookie nueva, las cookies más antiguas no se sobrescriben. La nueva cookie se agrega a document.cookie, por lo que si lees document.cookie nuevamente obtendrás algo como:

galleta1=valor; galleta2=valor;

Si desea encontrar el valor de una cookie específica, debe escribir un JavaScript función que busca el valor de la cookie en la cadena de cookies.

Ejemplo de cookies de JavaScript

En el ejemplo siguiente, crearemos una cookie que almacena el nombre de un visitante.

La primera vez que un visitante llegue a la página web, se le pedirá que introduzca su nombre. Luego, el nombre se almacena en una cookie.

La próxima vez que el visitante llegue a la misma página, recibirá un mensaje de bienvenida.

Para el ejemplo crearemos 3 funciones de JavaScript:

  1. Una función para establecer un valor de cookie

  2. Una función para obtener un valor de cookie.

  3. Una función para comprobar el valor de una cookie.

Una función para configurar una cookie

Primero, creamos una función que almacena el nombre del visitante en una variable de cookie:

Ejemplo

function setCookie(cname, cvalue, exdays) {
   const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

Ejemplo explicado:

Los parámetros de la función anterior son el nombre de la cookie (cname), el valor de la cookie (cvalue) y el número de días hasta que la cookie caduque (exdays).

La función establece una cookie sumando el nombre de la cookie, la cookie valor y la cadena de caducidad.

Una función para obtener una cookie

Luego, creamos una función que devuelve el valor de una cookie específica:

Ejemplo

function getCookie(cname) {
   
let name = cname + "=";
   
let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
      let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
      
 }
      if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
      }
    }
    return "";
}

Función explicada:

Tome el nombre de la cookie como parámetro (cname).

Crea una variable (nombre) con el texto a buscar (cname + "=").

Decodifica la cadena de cookies para manejar cookies con caracteres especiales, p. ps

Divida document.cookie en punto y coma en una matriz llamada ca (ca = decodificadoCookie.split(';')).

Recorra la matriz ca (i=0; i < ca.length; i++) y lea cada valor c=ca[i]).

Si se encuentra la cookie (c.indexOf(name) == 0), devuelve el valor de la cookie (c.subcadena (nombre.longitud, c.longitud).

Si no se encuentra la cookie, devuelva "".

Una función para comprobar una cookie

Por último, creamos la función que verifica si hay una cookie configurada.

Si la cookie está configurada, mostrará un saludo.

Si la cookie no está configurada, mostrará un cuadro emergente que solicitará el nombre del usuario. y almacena la cookie del nombre de usuario durante 365 días, llamando a la función setCookie:

Ejemplo

function checkCookie() {
  let 
username = getCookie("username");
  if (username != "") {
     alert("Welcome again " + username);
  } else {
    username = prompt("Please enter your name:", "");
      if (username != "" 
&& username != null) {
        setCookie("username", username, 365);
      }
  }
}

Todos juntos ahora

Ejemplo

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
   
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + 
";" + expires + ";path=/";
}
function getCookie(cname) {
  let name = cname + "=";
    let ca 
= document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) 
{
    
let c = ca[i];
    while (c.charAt(0) == ' 
') {
      c = c.substring(1);
    }
    if (c.indexOf(name) 
 == 0) {
      return c.substring(name.length, c.length);
      }
  }
    return "";
}
function 
checkCookie() {
  let user = getCookie("username");
  if (user != "") 
{
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
      if (user != "" && 
user != null) {
      setCookie("username", user, 365);
      }
  }
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
     user = prompt("Please enter your name:","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>

El ejemplo anterior ejecuta la función checkCookie() cuando se carga la página.