localStorage: Almacenamiento Persistente en el Navegador
Aprende a guardar datos en el navegador que persisten entre sesiones usando localStorage, ideal para preferencias de usuario, configuraciones y caché simple.
TL;DR - Resumen rápido
- localStorage almacena datos como strings con persistencia ilimitada
- Los datos persisten incluso después de cerrar el navegador
- Tiene un límite de 5-10MB por dominio según el navegador
- Solo almacena strings, necesitas JSON para objetos complejos
- El evento storage permite sincronizar datos entre pestañas automáticamente
Introducción al Almacenamiento Local
localStorage es una de las APIs de almacenamiento web más utilizadas en JavaScript. Permite guardar datos en el navegador del usuario de forma persistente, lo que significa que la información permanece disponible incluso después de cerrar y volver a abrir el navegador. Esto lo convierte en la solución ideal para guardar preferencias de usuario, configuraciones de tema, datos de formulario temporal y caché simple de información.
A diferencia de las cookies, localStorage no envía datos automáticamente al servidor con cada petición HTTP, lo que reduce el tráfico de red y mejora el rendimiento. Además, ofrece una API más simple y moderna basada en pares clave-valor, facilitando su uso en aplicaciones web modernas.
- Persistencia de datos entre sesiones del navegador
- Capacidad de 5-10MB por dominio (muy superior a cookies)
- API simple basada en métodos clave-valor
- Disponible en todos los navegadores modernos
- No envía datos automáticamente al servidor
Diferencia con sessionStorage
localStorage persiste indefinidamente hasta que se elimina manualmente, mientras que sessionStorage solo mantiene los datos mientras la pestaña o ventana está abierta. Al cerrar la pestaña, sessionStorage se borra automáticamente.
¿Qué es localStorage?
localStorage es parte de la Web Storage API introducida en HTML5. Es un objeto global que proporciona una forma de almacenar datos con clave-valor en el navegador del usuario. Los datos se almacenan como strings y no tienen fecha de expiración automática, a diferencia de las cookies que pueden tener un tiempo de vida definido.
Cada dominio tiene su propio espacio de localStorage aislado, lo que significa que los datos guardados en example.com no son accesibles desde otrodominio.com. Esto proporciona seguridad y evita conflictos entre diferentes sitios web que usan localStorage.
Ventajas sobre Cookies
localStorage ofrece mayor capacidad (5-10MB vs 4KB de cookies), mejor rendimiento (no viaja en cada petición HTTP), API más simple y no requiere configuración de expiración. Es ideal para datos que no necesitan ser enviados al servidor.
Métodos Básicos de localStorage
localStorage proporciona cuatro métodos principales para manipular datos: setItem para guardar, getItem para leer, removeItem para eliminar una clave específica y clear para borrar todos los datos. Estos métodos son síncronos y bloquean el hilo principal, por lo que es importante usarlos con datos pequeños y operaciones rápidas.
setItem - Guardar Datos
El método setItem guarda un valor asociado a una clave específica. Si la clave ya existe, su valor se sobrescribe. Es importante recordar que localStorage solo acepta strings, por lo que cualquier otro tipo de dato (números, objetos, arrays) debe convertirse a string antes de guardarse.
El código muestra cómo guardar diferentes tipos de datos en localStorage. Los números se convierten automáticamente a strings al guardarlos. Para guardar objetos complejos, es necesario usar JSON.stringify para convertirlos a formato string antes de almacenarlos.
Advertencia: Conversión Automática
localStorage siempre almacena strings. Si guardas un número como 42, se guardará como "42". Al recuperarlo, recibirás el string "42", no el número 42. Debes convertirlo explícitamente con parseInt() o parseFloat() si necesitas el valor numérico.
getItem - Leer Datos
El método getItem recupera el valor asociado a una clave específica. Si la clave no existe, retorna null. Es una buena práctica siempre verificar si el resultado es null antes de usar el valor, ya que intentar acceder a propiedades de null causará un error.
Este ejemplo muestra cómo leer datos de localStorage de forma segura. El código verifica si el valor existe antes de usarlo, evitando errores cuando la clave no ha sido guardada previamente. También demuestra cómo convertir strings de vuelta a su tipo original cuando es necesario.
removeItem - Eliminar Datos
El método removeItem elimina una clave específica y su valor asociado de localStorage. Si la clave no existe, el método simplemente no hace nada sin lanzar ningún error. Esto lo hace seguro de usar incluso cuando no estás seguro de si la clave existe.
El código demuestra cómo eliminar claves específicas de localStorage. Después de usar removeItem, intentar leer esa clave con getItem retornará null. Este patrón es útil para limpiar datos que ya no son necesarios, como tokens de sesión caducados o preferencias temporales.
clear - Limpiar Todo
El método clear elimina todas las claves y valores almacenados en localStorage para el dominio actual. Esta operación es irreversible y debe usarse con precaución. Es útil cuando necesitas limpiar completamente el almacenamiento local, por ejemplo, cuando un usuario cierra sesión o restablece la configuración de la aplicación.
Este ejemplo muestra cómo verificar si localStorage tiene datos antes de limpiarlo completamente. La propiedad length indica cuántas claves están almacenadas. Después de usar clear, length será 0 y todas las claves previas habrán desaparecido.
Advertencia: Operación Destructiva
clear elimina TODOS los datos de localStorage para tu dominio, no solo los de tu aplicación. Si otros scripts en el mismo dominio usan localStorage, clear también borrará sus datos. Úsalo solo cuando estés seguro de que quieres limpiar todo el almacenamiento.
JSON y Serialización de Datos Complejos
Como localStorage solo almacena strings, necesitas usar JSON para guardar y recuperar objetos y arrays. JSON.stringify convierte objetos JavaScript a strings JSON, mientras que JSON.parse hace lo inverso. Este patrón es fundamental para trabajar con datos estructurados en localStorage.
El código muestra el patrón completo para guardar y recuperar objetos complejos usando JSON. Al guardar, usamos JSON.stringify para convertir el objeto a string. Al leer, usamos JSON.parse para convertir el string de vuelta a objeto. Es importante envolver JSON.parse en un try-catch para manejar errores de parseo si el JSON está corrupto.
Manejo de Errores en JSON
Siempre usa try-catch al hacer JSON.parse. Si el string no es un JSON válido (por ejemplo, si fue modificado manualmente por el usuario en DevTools), JSON.parse lanzará un error y romperá tu aplicación. El try-catch te permite manejar este caso de forma elegante.
Evento storage: Sincronización entre Pestañas
El evento storage es una característica poderosa de localStorage que permite sincronizar datos automáticamente entre pestañas o ventanas del mismo origen. Este evento se dispara cuando localStorage cambia en otra pestaña, permitiendo que todas las pestañas abiertas se mantengan sincronizadas sin necesidad de polling o intervalos.
Es importante entender que el evento storage NO se dispara en la pestaña que realizó el cambio, solo en las otras pestañas abiertas. Esto evita procesar el mismo cambio dos veces y permite implementar sincronización unidireccional eficiente.
El evento storage proporciona información detallada sobre el cambio: la clave modificada, el valor anterior, el nuevo valor y la URL de la página que hizo el cambio. Esto permite implementar sincronización inteligente, actualizando solo las partes de la interfaz que necesitan cambiar cuando los datos se modifican en otra pestaña.
Limitaciones y Consideraciones
localStorage tiene varias limitaciones importantes que debes conocer antes de usarlo en producción. Estas limitaciones afectan cuándo y cómo deberías usar localStorage en tus aplicaciones, y cuándo considerar alternativas como IndexedDB para casos más complejos.
- <strong>Límite de tamaño:</strong> 5-10MB por dominio según el navegador
- <strong>Solo strings:</strong> Necesitas JSON para objetos y arrays
- <strong>Síncrono:</strong> Bloquea el hilo principal en operaciones pesadas
- <strong>Seguridad:</strong> Accesible por cualquier script en el mismo dominio
- <strong>Sin indexación:</strong> No puedes hacer búsquedas eficientes en los datos
No Guardes Datos Sensibles
localStorage no es seguro para datos sensibles como contraseñas, tokens de autenticación, información financiera o datos personales. Cualquier script en el mismo dominio puede acceder a localStorage, incluyendo scripts maliciosos de terceros. Usa cookies seguras (HttpOnly) para datos sensibles.
Errores Comunes
Estos son los errores más frecuentes que encontrarás al trabajar con localStorage, especialmente cuando estás aprendiendo o migrando código legacy. Conocer estos patrones te ayudará a evitar bugs comunes y escribir código más robusto.
Error: JSON.parse sin try-catch
Un error común es hacer JSON.parse directamente sin manejar errores. Si el string no es JSON válido, la aplicación se romperá completamente. Esto puede ocurrir si el usuario modificó manualmente localStorage en DevTools o si hubo un error en el guardado.
El código muestra el error común (sin try-catch) y la solución correcta. El error causa que la aplicación se rompa si el JSON es inválido. La solución usa try-catch para manejar el caso de error y retornar un valor por defecto, permitiendo que la aplicación continúe funcionando.
Error: No verificar null en getItem
Otro error frecuente es asumir que getItem siempre retornará un valor. Si la clave no existe, getItem retorna null, y intentar acceder a propiedades de null causará un TypeError. Siempre verifica que el resultado no sea null antes de usarlo.
El ejemplo muestra el error de asumir que el valor existe y la solución correcta con verificación de null. El error causa TypeError cuando la clave no existe. La solución verifica si el valor es null antes de usarlo, proporcionando un valor por defecto si es necesario.
Error: Exceder la Cuota de Almacenamiento
localStorage tiene un límite de 5-10MB por dominio. Si intentas guardar más datos que el límite, localStorage lanzará una excepción QuotaExceededError. Es importante manejar este error, especialmente en aplicaciones que guardan datos progresivamente.
El código muestra cómo capturar y manejar el error cuando se excede la cuota. El try-catch permite que la aplicación continúe funcionando incluso cuando no se pueden guardar más datos. En producción, podrías implementar una estrategia de limpieza automática de datos antiguos cuando se acerca al límite.
Resumen: localStorage
Conceptos principales:
- •localStorage almacena datos persistentes en el navegador
- •Solo acepta strings, requiere JSON para objetos complejos
- •Ofrece 5-10MB de almacenamiento por dominio
- •API simple: setItem, getItem, removeItem, clear
- •El evento storage sincroniza datos entre pestañas
Mejores prácticas:
- •Usa try-catch al hacer JSON.parse de datos guardados
- •Verifica null antes de usar valores de getItem
- •No guardes datos sensibles en localStorage
- •Maneja el error QuotaExceededError cuando guardes datos
- •Usa el evento storage para mantener pestañas sincronizadas