localStorage frente a sessionStorage
Elija la duración de almacenamiento adecuada.
localStorage frente a sessionStorage es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Dos almacenes, la misma API
localStorage y sessionStorage comparten métodos idénticos. La diferencia es su duración: cuánto tiempo sobreviven los datos.
localStorage es persistente
Los datos de localStorage permanecen hasta que se eliminan explícitamente. Sobreviven a las recargas de la página, al cierre de pestañas y al reinicio del navegador.
localStorage.setItem("theme", "dark");
// Still there days later, after closing the browsersessionStorage es temporal
Los datos de sessionStorage duran únicamente durante la sesión de la pestaña. Al cerrar la pestaña, se eliminan.
sessionStorage.setItem("step", "2");
// Gone once the tab is closedAislamiento por pestaña
Cada pestaña del navegador tiene su propio sessionStorage. Dos pestañas del mismo sitio tienen almacenes de sesión independientes; NO comparten datos.
localStorage es compartido
En cambio, todas las pestañas y ventanas del mismo origen comparten un único localStorage. Una escritura en una pestaña es visible en las demás.
Comportamiento al recargar
Una recarga normal conserva sessionStorage en esa pestaña. Duplicar una pestaña puede copiar la sesión, pero abrir una pestaña nueva la inicia vacía.
sessionStorage.setItem("draft", text);
// Survives F5 reload in the same tabElección entre ambos
Utilice localStorage para preferencias de larga duración (tema, idioma). Utilice sessionStorage para estados temporales específicos de una pestaña (un paso de un asistente o un borrador de formulario de un solo uso).
Precaución de seguridad
Ninguno de los dos almacenes es seguro. Cualquier script de la página puede leerlos, por lo que nunca debe guardar contraseñas ni tokens confidenciales que deban permanecer privados.
Los mismos métodos en todas partes
Como las API coinciden, puede cambiar un almacén por el otro modificando únicamente el nombre del objeto. El código escrito para uno funciona con el otro.
const store = useSession ? sessionStorage : localStorage;
store.setItem("k", "v");Navegación privada
En los modos privado o incógnito, ambos almacenes suelen borrarse al finalizar la sesión, y algunos navegadores los limitan o desactivan. Gestione siempre la posibilidad de que una escritura falle.
try {
localStorage.setItem("k", "v");
} catch (e) {
console.log("storage unavailable");
}La cuota es independiente
Cada almacén tiene su propia cuota (normalmente de unos 5 MB por origen). Llenar sessionStorage no consume el presupuesto de localStorage.
Comprobación rápida
Comparación de los dos almacenes.
Resumen
Ambos almacenes comparten la misma API, pero difieren en su duración. localStorage persiste entre sesiones y lo comparten todas las pestañas de un origen; sessionStorage solo existe durante la sesión de una pestaña y está aislado por pestaña. Ninguno es seguro y cada uno tiene su propia cuota de aproximadamente 5 MB.
Preguntas frecuentes
¿La lección «localStorage frente a sessionStorage» es gratis?
Sí — el texto completo de «localStorage frente a sessionStorage» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «localStorage frente a sessionStorage»?
Elija la duración de almacenamiento adecuada. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «localStorage frente a sessionStorage»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Almacenamiento y lectura de datos
- localStorage frente a sessionStorage
- Almacenamiento de objetos con JSON
- Eventos y límites de almacenamiento