Cómo Usar LocalStorage en JavaScript para Guardar y Recuperar Datos

LocalStorage permite a los desarrolladores almacenar datos de tipo clave-valor en el navegador del usuario de manera persistente. Es útil para almacenar preferencias de usuario, almacenar en caché respuestas de API y mantener el estado de la aplicación entre sesiones.

Entendiendo LocalStorage

LocalStorage es parte de la API de Web Storage y proporciona métodos para almacenar, recuperar y eliminar datos:

localStorage.setItem('theme', 'dark'); // Store data
const theme = localStorage.getItem('theme'); // Retrieve data
localStorage.removeItem('theme'); // Remove a specific item
localStorage.clear(); // Clear all stored data

LocalStorage persiste datos hasta que se eliminan explícitamente. Los datos se almacenan como cadenas de texto, por lo que para objetos o arrays, usa JSON.stringify() y JSON.parse():

const settings = { theme: 'dark', fontSize: 16 };
localStorage.setItem('settings', JSON.stringify(settings));
const savedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(savedSettings.theme); // ""dark""

Caso de Uso 1: Almacenamiento de Preferencias de Usuario

LocalStorage se utiliza comúnmente para almacenar configuraciones de UI como preferencias de tema.

// Saving theme preference
localStorage.setItem('theme', 'dark');

// Applying stored preference on page load
const savedTheme = localStorage.getItem('theme');
if (savedTheme) applyTheme(savedTheme);

Caso de Uso 2: Almacenamiento en Caché de Respuestas de API

El almacenamiento en caché de respuestas de API reduce las solicitudes de red innecesarias y mejora el rendimiento.

const cacheKey = 'apiData';
const maxAge = 60 * 60 * 1000; // 1 hour

const cached = localStorage.getItem(cacheKey);
if (cached) {
    const { data, timestamp } = JSON.parse(cached);
    if (Date.now() - timestamp < maxAge) {
        renderData(data);
    } else {
        localStorage.removeItem(cacheKey);
    }
}

if (!localStorage.getItem(cacheKey)) {
    fetch('/api/data')
        .then(response => response.json())
        .then(data => {
            renderData(data);
            localStorage.setItem(cacheKey, JSON.stringify({ data, timestamp: Date.now() }));
        });
}

LocalStorage vs. Otras Opciones de Almacenamiento Web

• SessionStorage: Misma API que LocalStorage pero los datos se borran cuando se cierra la pestaña.
• IndexedDB: Admite almacenamiento de datos a gran escala con consultas estructuradas pero es más complejo.
• Cookies: Utilizadas para almacenamiento del lado del servidor, se envían automáticamente con las solicitudes HTTP.

Limitaciones y Mejores Prácticas

• Riesgos de Seguridad: Los datos son accesibles a través de JavaScript; no almacenes información sensible.
• Límites de Almacenamiento: Alrededor de 5MB por origen; exceder esto lanza un QuotaExceededError.
• Acceso Síncrono: Las lecturas/escrituras grandes pueden bloquear el hilo principal.
• Sin Expiración Automática: Implementa la lógica de expiración manualmente si es necesario.
• Usa Espacios de Nombres: Prefija las claves para evitar conflictos (MyApp_theme en lugar de theme).

Conclusión

LocalStorage es una herramienta poderosa pero simple para persistir pequeñas cantidades de datos del lado del cliente. Es más adecuado para almacenar preferencias de usuario y almacenar en caché respuestas ligeras de API. Sin embargo, los desarrolladores deben ser conscientes de sus limitaciones de seguridad y asegurar un manejo adecuado de los datos para evitar problemas de rendimiento.

Preguntas Frecuentes

¿Los datos de LocalStorage caducan?

No, los datos de LocalStorage persisten indefinidamente a menos que se borren manualmente.

¿Cuántos datos puedo almacenar en LocalStorage?

Típicamente alrededor de 5MB por origen, dependiendo del navegador.

¿Es LocalStorage seguro para almacenar datos sensibles?

No, LocalStorage es accesible mediante JavaScript y no debe utilizarse para datos sensibles.

¿En qué se diferencia LocalStorage de SessionStorage?

LocalStorage persiste datos entre sesiones, mientras que SessionStorage borra los datos cuando se cierra la pestaña.

¿Debería usar LocalStorage o IndexedDB?

Usa LocalStorage para pares clave-valor pequeños; IndexedDB es mejor para almacenamiento complejo o a gran escala.