¿Cómo establecer cookies en el navegador?

Se puede establecer una cookie en el navegador de varias maneras.

1. A través del encabezado HTTP Set-Cookie desde el servidor. Este es el método principal para establecer cookies, que ocurre en el lado del servidor. El servidor envía al navegador el encabezado Set-Cookie, que instruye al navegador a guardar un par clave-valor específico.

   Ejemplo de respuesta HTTP del servidor:

   HTTP/1.1 200 OK
   Content-Type: text/html
   Set-Cookie: username=johndoe; Expires=Thu, 21 Dec 2023 12:00:00 GMT; Path=/; Secure; HttpOnly
   Set-Cookie: settings=theme=dark&lang=en; Path=/
   

   Parámetros del encabezado Set-Cookie:

   • name=value: Nombre y valor de la cookie. Parámetro obligatorio.
   • Expires=<date>: Fecha y hora en que expira la cookie. Si no se especifica, la cookie es de sesión y se elimina al cerrar el navegador. Formato de fecha - RFC 1123.
   • Max-Age=<seconds>: Tiempo máximo de vida de la cookie en segundos. Tiene prioridad sobre Expires.
   • Domain=<domain>: Dominio para el cual la cookie está disponible. Por defecto, el dominio actual (pero no subdominios).
   • Path=<path>: Ruta en el servidor para la cual la cookie está disponible. Por defecto, la ruta raíz /.
   • Secure: Indicador de que la cookie solo debe enviarse a través de HTTPS.
   • HttpOnly: Indicador de que la cookie no es accesible mediante JavaScript a través de document.cookie. Protege contra ataques XSS.
   • SameSite=<mode>: Controla el envío de cookies en solicitudes entre sitios. Valores posibles: Strict, Lax (por defecto), None.

2. A través de JavaScript en el lado del cliente. Con el objeto document.cookie se puede leer, escribir y eliminar cookies.

   Escribir cookie:

   // Establecer una cookie simple
   document.cookie = "username=johndoe";
   
   // Establecer cookie con expires, path, secure y SameSite=Lax
   const expiryDate = new Date();
   expiryDate.setTime(expiryDate.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30 días
   document.cookie = `token=abcdef123456; expires=${expiryDate.toUTCString()}; path=/; secure; SameSite=Lax`;
   

   Leer cookies:

   // document.cookie devuelve una cadena con todas las cookies accesibles en formato "clave1=valor1; clave2=valor2; ..."
   console.log(document.cookie);
   

   Eliminar cookie: Para eliminar una cookie, hay que establecerla con una fecha de expiración en el pasado.

   document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; // Establecer expires en el pasado
   

   Es importante que al eliminar se especifiquen los mismos parámetros path y domain (si se establecieron), que al crearla. SameSite también debe coincidir para una eliminación correcta.

3. Con bibliotecas JavaScript de terceros. Existen bibliotecas que facilitan el trabajo con cookies (por ejemplo, js-cookie). Proporcionan una API más sencilla para establecer, obtener y eliminar cookies.

   Ejemplo con js-cookie:

   // Incluir la biblioteca
   // <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
   
   // Establecer una cookie
   Cookies.set('username', 'johndoe');
   
   // Establecer una cookie con opciones
   Cookies.set('token', 'abcdef123456', { expires: 30, path: '/', secure: true, sameSite: 'Lax' }); // expires en días
   
   // Obtener cookies
   const username = Cookies.get('username'); // Devuelve 'johndoe' o undefined
   const allCookies = Cookies.get(); // Devuelve un objeto con todas las cookies
   
   // Eliminar cookies
   Cookies.remove('username');
   Cookies.remove('token', { path: '/' }); // Especificar path si fue establecido