Back

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

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.

Puntos Clave

  • LocalStorage es un sistema de almacenamiento simple de clave-valor que persiste datos a través de recargas de página y reinicios del navegador.
  • No debe utilizarse para datos sensibles debido a preocupaciones de seguridad.
  • Útil para almacenar preferencias de usuario y almacenamiento en caché ligero de respuestas de API.
  • Las opciones alternativas incluyen SessionStorage (temporal) e IndexedDB (para almacenamiento de datos complejos o a gran escala).

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

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

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

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

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

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

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.
Loved by thousands of developers