domingo 29 septiembre 2024

Cómo utilizar la biblioteca js-cookie en JavaScript

¿Qué es js-cookie?
Uso básico de js-cookie
Opciones avanzadas de js-cookie
Casos prácticos

La gestión de cookies en JavaScript ha sido tradicionalmente algo compleja, ya que requiere utilizar la propiedad document.cookie y manejar manualmente cadenas con formato específico para leer, escribir y eliminar cookies. Para simplificar esta tarea, surgieron bibliotecas como js-cookie. js-cookie es una librería ligera y sencilla que proporciona una interfaz clara para trabajar con cookies en el entorno del navegador.

¿Qué es `js-cookie`?

js-cookie es una biblioteca de JavaScript que facilita la creación, lectura y eliminación de cookies. Proporciona una API intuitiva que te permite manejar cookies de manera mucho más sencilla que utilizando document.cookie directamente. Entre sus principales ventajas se encuentran:

Simplicidad: Es fácil de usar y tiene una sintaxis clara.
Ligereza: Es muy ligera (menos de 3 KB).
Compatibilidad: Soporta todos los navegadores modernos y ofrece soporte completo para cookies con clave y valor codificados.

Instalación de `js-cookie`

Antes de poder utilizar js-cookie, es necesario instalarla en tu proyecto. Hay varias formas de hacerlo:

1. Mediante un CDN (recomendado para proyectos pequeños):

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>

2. Con NPM (para proyectos basados en Node.js):

npm install js-cookie

3. Con Yarn:

yarn add js-cookie

Una vez que has incluido la biblioteca en tu proyecto, puedes comenzar a usarla con la variable global Cookies (si se ha cargado a través de un CDN) o importarla como un módulo ES6:

import Cookies from 'js-cookie';

Uso básico de `js-cookie`

1. Crear una cookie

La sintaxis básica para crear una cookie es la siguiente:

Cookies.set('nombre_cookie', 'valor_cookie');

Esto creará una cookie con el nombre nombre_cookie y el valor valor_cookie que estará disponible en el sitio. Por defecto, las cookies creadas con js-cookie se eliminan al cerrar el navegador (sesión).

Especificar opciones adicionales

Puedes pasar un tercer parámetro a Cookies.set para configurar opciones como la fecha de expiración, el dominio y la ruta:

Cookies.set('usuario', 'Juan Perez', { expires: 7, path: '/' });

En este caso, se creará una cookie con nombre usuario y valor Juan Perez que:

Expira en 7 días (expires: 7).
Está disponible en todas las rutas del sitio (path: '/').

2. Leer una cookie

Para leer el valor de una cookie, simplemente usa el método Cookies.get pasando el nombre de la cookie:

const usuario = Cookies.get('usuario');
console.log(usuario); // Imprime: Juan Perez

Si la cookie no existe, devolverá undefined.

Para obtener todas las cookies almacenadas, usa Cookies.get() sin argumentos:

const todasLasCookies = Cookies.get();
console.log(todasLasCookies);
// Ejemplo de salida: { usuario: 'Juan Perez', sesion_id: 'abc123' }

3. Eliminar una cookie

Eliminar una cookie es tan sencillo como usar el método Cookies.remove pasando el nombre de la cookie:

Cookies.remove('usuario');

Si la cookie se creó con opciones como path o domain, deberás especificar esas mismas opciones al eliminarla:

Cookies.remove('usuario', { path: '/' });

4. Crear cookies con un objeto JavaScript

También es posible almacenar valores más complejos, como objetos, codificando sus valores como cadenas. Por ejemplo:

const preferencias = { tema: 'oscuro', idioma: 'es' };
Cookies.set('preferencias', JSON.stringify(preferencias), { expires: 30 });

Para recuperar y usar esos valores:

const preferenciasGuardadas = JSON.parse(Cookies.get('preferencias'));
console.log(preferenciasGuardadas.tema); // Imprime: oscuro

Opciones avanzadas de `js-cookie`

1. Definir el dominio y la ruta

Por defecto, las cookies son válidas solo en la ruta actual (/) y el dominio exacto desde el que se crean. Si quieres que la cookie sea accesible desde otras rutas o subdominios, puedes configurar las opciones domain y path:

Cookies.set('global_cookie', 'valor', { domain: 'misitio.com', path: '/' });

2. Configurar la seguridad con `secure`

El atributo secure garantiza que la cookie solo se envíe a través de conexiones HTTPS:

Cookies.set('secure_cookie', 'valor_seguro', { secure: true });

Esto es especialmente útil cuando trabajas con información confidencial que debe ser protegida.

3. Especificar la expiración en un objeto de fecha

Si necesitas especificar una fecha exacta para la expiración de la cookie, puedes pasar un objeto Date en lugar de un número de días:

const fechaExpiracion = new Date(2024, 9, 30); // 30 de octubre de 2024
Cookies.set('expiracion_exacta', 'valor', { expires: fechaExpiracion });

4. Configurar atributos adicionales (`sameSite`)

El atributo sameSite se utiliza para especificar cuándo las cookies se envían con solicitudes entre sitios. Es una medida de seguridad importante para prevenir ataques de falsificación de solicitudes entre sitios (CSRF). Los valores posibles son:

strict: La cookie solo se envía si la solicitud proviene del mismo sitio.
lax: La cookie se envía con la mayoría de solicitudes de navegación, pero no con solicitudes intersitios (por ejemplo, formularios POST).
none: La cookie se envía con todas las solicitudes, pero requiere el atributo secure.

Cookies.set('sensible_cookie', 'valor', { sameSite: 'strict' });

Casos prácticos

A continuación, te muestro algunos ejemplos prácticos del uso de js-cookie en aplicaciones reales:

1. Recordar la preferencia de idioma del usuario

Si un sitio web es multilingüe, puedes usar cookies para recordar la preferencia de idioma de los usuarios:

// Establecer la preferencia de idioma
Cookies.set('idioma', 'es', { expires: 365 });

// Leer la preferencia al cargar la página
const idiomaUsuario = Cookies.get('idioma') || 'en';

2. Guardar el estado de la sesión

Puedes utilizar js-cookie para almacenar un identificador de sesión en lugar de usar localStorage:

Cookies.set('sesion_id', '123456789', { expires: 1, secure: true, sameSite: 'strict' });

3. Implementar un banner de consentimiento de cookies

Es común que los sitios web pidan a los usuarios que acepten el uso de cookies. Puedes gestionar este banner usando js-cookie para almacenar su consentimiento:

// Almacenar el consentimiento del usuario
Cookies.set('consentimiento_cookies', 'aceptado', { expires: 365 });

// Comprobar si el usuario ha aceptado
if (Cookies.get('consentimiento_cookies') !== 'aceptado') {
  mostrarBannerDeCookies();
}

Conclusión

js-cookie simplifica considerablemente el manejo de cookies en JavaScript, eliminando la necesidad de lidiar con la complejidad de document.cookie. Con su sintaxis clara y opciones avanzadas, es una herramienta imprescindible para desarrolladores que buscan gestionar las cookies de manera eficiente y segura.

Espero que esta guía te haya sido útil y que puedas aplicar estas técnicas en tus proyectos para manejar cookies de manera más profesional.

Etiquetas:

javascript

Creado por:

Jorge García

Fullstack developer