Cookies en JavaScript: ejemplo de establecer, obtener y eliminar

¿Qué son las cookies?

Una cookie es un fragmento de datos que se almacena en tu ordenador para que tu navegador pueda acceder a él. Es posible que hayas disfrutado de las ventajas de las cookies, ya sea de forma consciente o inconsciente. ¿Alguna vez has mantenido la sesión iniciada en un sitio como Facebook para no tener que escribir tus datos cada vez que intentas iniciar sesión? Si es así, estás utilizando cookies. Las cookies se guardan como pares clave/valor.

Una aclaración importante: una cookie no almacena tu contraseña. Almacena un identificador de sesión, que es un token aleatorio que el servidor emite tras un inicio de sesión exitoso. El servidor asocia ese token a tu cuenta, por lo que la contraseña en sí nunca sale del servidor.

¿Por qué necesitas una galleta?

La comunicación entre un navegador web La comunicación con el servidor se realiza mediante un protocolo sin estado llamado HTTP. Un protocolo sin estado procesa cada solicitud de forma independiente. Por lo tanto, el servidor no conserva los datos después de enviarlos al navegador. Sin embargo, en muchas ocasiones, los datos se necesitarán de nuevo. Aquí es donde entran en juego las cookies. Con las cookies, el navegador web no tendrá que comunicarse con el servidor cada vez que se requieran los datos. En su lugar, estos se pueden obtener directamente del ordenador.

Los usos típicos incluyen recordar una sesión iniciada, almacenar una preferencia de idioma o tema, mantenerping artículos en una tiendaping cesta entre páginas y contabilizando los visitantes nuevos frente a los recurrentes.

Javascript Establecer galleta

Puedes crear cookies utilizando la propiedad document.cookie de esta manera.

document.cookie = "cookiename=cookievalue"

Incluso puedes añadir una fecha de caducidad a tu cookie para que se elimine del ordenador en la fecha especificada. La fecha de caducidad debe configurarse en formato UTC/GMT. Si no la configuras, la cookie se eliminará cuando el usuario cierre el navegador.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC"

También puedes configurar el dominio y la ruta para especificar a qué dominio y a qué directorios dentro de ese dominio pertenece la cookie. Por defecto, una cookie pertenece a la página que la establece.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC; path=/ "

//crea una cookie con el dominio de la página actual y una ruta que abarque todo el dominio.

JavaScript Obtener Cookie

Puedes acceder a la cookie de esta manera, lo que devolverá todas las cookies guardadas para el dominio actual.

var x =  document.cookie

El valor devuelto es una única cadena con el formato name1=value1; name2=value2No existe un método integrado para leer una cookie por su nombre, por lo que la cadena debe dividirse. La función auxiliar que se muestra a continuación devuelve un único valor y una cadena vacía cuando no se especifica el nombre.

function getCookie(name) {
    const pairs = document.cookie.split(";");
    for (let i = 0; i < pairs.length; i++) {
        const pair = pairs[i].trim();
        if (pair.indexOf(name + "=") === 0) {
            // decode in case the value contained spaces or symbols
            return decodeURIComponent(pair.substring(name.length + 1));
        }
    }
    return "";
}

document.cookie = "username=Ann Smith; path=/";
console.log(getCookie("username"));
console.log(getCookie("missing") === "");

Salida:

Ann Smith
true

JavaScript para eliminar cookies

Para eliminar una cookie, solo tienes que establecer el valor de la cookie como vacío y el valor de expirar a una fecha que ya haya pasado.

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

Un detalle es la causa de la mayoría de los fallos al eliminar cookies. El navegador identifica una cookie por su nombre, su ruta y su dominio, por lo que la instrucción de eliminación debe repetir la misma ruta y el mismo dominio que se utilizaron cuando se creó la cookie.

// created with an explicit path
document.cookie = "theme=dark; path=/; max-age=2592000";

// deletion must repeat that same path
document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// max-age=0 achieves the same result in one shorter line
document.cookie = "theme=; path=/; max-age=0";

Explicación de los atributos de las cookies

Cada atributo que aparece después del primer punto y coma modifica la duración de la cookie, las solicitudes que la utilizan y el código que puede leerla. La referencia que se muestra a continuación abarca todos estos aspectos.

SameSite merece especial atención porque los navegadores ahora aplican un valor predeterminado. Los tres valores aceptados se comportan de la siguiente manera.

• Estricto: La cookie nunca se envía cuando la solicitud proviene de otro sitio, lo cual es la configuración más segura para las sesiones bancarias.
• Flojo: La cookie se transmite con la navegación principal, como al hacer clic en un enlace, pero no con imágenes o marcos de otros sitios. Esta es la configuración predeterminada de los navegadores modernos.
• Ninguno: La cookie se envía en cada solicitud entre sitios y debe ir acompañada del atributo Secure; de ​​lo contrario, el navegador la rechaza.

// a well configured cookie set from client side script
document.cookie = "language=en; path=/; max-age=31536000; SameSite=Lax; Secure";

Pruebe este ejemplo usted mismo

El siguiente script combina las tres operaciones. Crea una cookie con una fecha de caducidad en días, la lee por su nombre y saluda a un visitante recurrente. Instrucciones especiales para que el código funcione… Pulse el botón de ejecución dos veces.

<html>
<head>
	<title>Cookie!!!</title>
	<script type="text/javascript">
		function createCookie(cookieName,cookieValue,daysToExpire)
        {
          var date = new Date();
          date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
          document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
        }
		function accessCookie(cookieName)
        {
          var name = cookieName + "=";
          var allCookieArray = document.cookie.split(';');
          for(var i=0; i<allCookieArray.length; i++)
          {
            var temp = allCookieArray[i].trim();
            if (temp.indexOf(name)==0)
            return temp.substring(name.length,temp.length);
       	  }
        	return "";
        }
		function checkCookie()
        {
          var user = accessCookie("testCookie");
          if (user!="")
        	alert("Welcome Back " + user + "!!!");
          else
          {
            user = prompt("Please enter your name");
            num = prompt("How many days you want to store your name on your computer?");
            if (user!="" && user!=null)
            {
            createCookie("testCookie", user, num);
            }
          }
        }
	</script>
</head>
<body onload="checkCookie()"></body>
</html>

Comportamiento esperado:

First run  : "Please enter your name"  -> Ann
             "How many days you want to store your name on your computer?" -> 5
Second run : alert box shows  Welcome Back Ann!!!

Code explicación: La función createCookie convierte un número de días en milisegundos y los suma a la hora actual, lo que genera la fecha de caducidad. La función accessCookie divide la cadena de la cookie por punto y coma, recorta cada fragmento y compara el inicio del fragmento con el nombre solicitado. La función checkCookie vincula ambas funciones al cargar la página.

Cookies vs. almacenamiento local vs. almacenamiento de sesión

Las cookies no son el único lugar donde un navegador puede almacenar datos. Existen dos opciones de almacenamiento web, y elegir la correcta evita enviar bytes innecesarios en cada solicitud.

La regla práctica es sencilla. Si el servidor necesita el valor, utilice una cookie. Si solo la página lo necesita, utilice localStorage o sessionStorage, ya que estos valores nunca añaden peso a una solicitud de red.

El código de gestión de cookies suele compartirse entre muchas páginas, por lo que revisar interno y externo JavaScript antes de decidir dónde colocarlo. La división de cadenas utilizada aquí se basa en JavaCadenas de script y JavaMétodos de matriz de scripty aparecen más guiones de trabajo en el Información JavaEjemplos de código de script.

Preguntas Frecuentes