Saltar al contenido principal

Browser/Cookies - Visión General

Paquete: @tiendana/utils

Conjunto completo de funciones para trabajar con cookies del navegador, proporcionando una API simple y type-safe para lectura, escritura, y eliminación de cookies.

Funciones Disponibles​

Lectura de Cookies​

getAllCookies​

Obtiene todas las cookies del navegador como un objeto JavaScript.

const cookies = getAllCookies();
// { token: 'abc123', theme: 'dark', user: { id: 1, name: 'Juan' } }

getCookie​

Obtiene el valor de una cookie específica por nombre.

const token = getCookie('token');
// 'abc123'

Escritura de Cookies​

setCookie​

Establece una cookie con opciones de configuración (expiración, path, domain, secure, sameSite).

setCookie('token', 'abc123', {
  expires: new Date('2025-12-31'),
  path: '/',
  secure: true,
  sameSite: 'Strict'
});

Eliminación de Cookies​

deleteCookie​

Elimina una cookie específica por nombre.

deleteCookie('token');

deleteAllCookies​

Elimina todas las cookies del navegador.

deleteAllCookies();

copyTextToClipboard​

Copia texto al portapapeles con notificación automática.

await copyTextToClipboard('Texto a copiar');
// Muestra snackbar: "Copiado al portapapeles"

downloadFile​

Descarga un archivo desde una URL programáticamente.

downloadFile('https://example.com/file.pdf', 'documento.pdf');

Casos de Uso Comunes​

Autenticación​

import { setCookie, getCookie, deleteCookie } from '@tiendana/utils';

// Login
function login(token: string) {
  setCookie('auth_token', token, {
    expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 días
    path: '/',
    secure: true,
    sameSite: 'Strict'
  });
}

// Verificar sesión
function isAuthenticated(): boolean {
  return getCookie('auth_token') !== null;
}

// Logout
function logout() {
  deleteCookie('auth_token', { path: '/' });
}

Preferencias de Usuario​

// Guardar tema
function saveTheme(theme: 'light' | 'dark') {
  setCookie('theme', theme, {
    expires: new Date('2030-01-01'), // Cookie de larga duración
    path: '/'
  });
}

// Cargar tema
function loadTheme(): string {
  return getCookie('theme') || 'light';
}

Tracking de Consentimiento​

interface ConsentPreferences {
  analytics: boolean;
  marketing: boolean;
  functional: boolean;
}

function saveConsent(preferences: ConsentPreferences) {
  setCookie('cookie_consent', preferences, {
    expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000), // 1 año
    path: '/',
    sameSite: 'Lax'
  });
}

function getConsent(): ConsentPreferences | null {
  return getCookie('cookie_consent');
}

Características Principales​

✅ Auto-parsing: Convierte automáticamente valores JSON, booleanos y strings
✅ Type-safe: Interfaces TypeScript para opciones de cookies
✅ Validación de tamaño: Advierte cuando una cookie excede 4096 bytes
✅ Encode/Decode: Maneja automáticamente codificación de caracteres especiales
✅ Flexible expiration: Acepta Date o timestamp Unix
✅ SameSite support: Soporta Lax, Strict, None para CSRF protection
✅ Path y domain: Control completo sobre scope de cookies

Limitaciones de Cookies​

Tamaño Máximo​

Las cookies tienen un límite de 4096 bytes según RFC 2109, 2965 y 6265. setCookie te advertirá cuando excedas este límite:

setCookie('large_data', veryLargeObject);
// ⚠️ Cookie size warning: The cookie "large_data" exceeds the recommended size...

Cantidad Máxima​

Los navegadores limitan la cantidad de cookies por dominio (típicamente 50-180).

Cookies por Dominio​

Las cookies solo son accesibles desde el dominio (y subdominios si se especifica) donde fueron creadas.

Seguridad​

Secure Flag​

Usa secure: true para cookies que solo deben transmitirse por HTTPS:

setCookie('session', token, {
  secure: true,  // Solo HTTPS
  sameSite: 'Strict'
});

SameSite Attribute​

Protege contra CSRF:

  • Strict: Cookie solo se envía en requests del mismo sitio
  • Lax: Cookie se envía en navegación top-level cross-site (default en navegadores modernos)
  • None: Cookie se envía en todos los requests (requiere secure: true)
setCookie('csrf_token', token, {
  sameSite: 'Strict',
  secure: true
});

Ver También​

  • Validation - Para validar valores antes de guardar en cookies
  • Objects - Para trabajar con cookies que contienen objetos