{"schema_version":"1.0","type":"Article","canonical_url":"https://visteesto.com/nota/localstorage-sessionstorage-cuando-usar","machine_urls":{"markdown":"https://visteesto.com/ai/article/localstorage-sessionstorage-cuando-usar/markdown","json":"https://visteesto.com/ai/article/localstorage-sessionstorage-cuando-usar/json"},"publisher":{"name":"VisteEsto","url":"https://visteesto.com","editor":"Martín Rodríguez","editorial_policy":"https://visteesto.com/politica-editorial","corrections_policy":"https://visteesto.com/correcciones"},"headline":"localStorage y sessionStorage: cuándo usar cada uno","description":"Qué diferencias hay entre localStorage y sessionStorage, cómo se separan por origen y pestaña y qué límites tiene Web Storage en el navegador.","dek":"localStorage conserva pares clave-valor para un origen incluso al volver a abrir el navegador; sessionStorage los limita a la sesión de una pestaña. Esta guía explica qué guardar, qué no guardar, cómo evitar bloquear la interfaz y cuándo conviene otra API.","language":"es","section":"Tecnología","topic":"web-storage-localstorage-sessionstorage","tags":["Programación","JavaScript","Web","Navegadores","Tecnología"],"author":{"name":"Martin Rodriguez","profile_url":"https://visteesto.com/autor/martin-rodriguez"},"date_published":"2026-10-04T18:00:00.000Z","date_modified":"2026-10-04T18:00:00.000Z","search_intent":"service","content_format":"service","primary_query":"localStorage y sessionStorage cuándo usar cada uno","intended_audience":"Personas que desarrollan interfaces web y necesitan guardar preferencias o estados temporales sin exponer datos ni bloquear la experiencia.","original_contribution":"VisteEsto convierte la documentación de Web Storage en una checklist de decisión: duración, origen, pestañas, sensibilidad, cuota, sincronía y alternativa técnica antes de guardar un valor.","key_facts":[{"statement":"localStorage y sessionStorage son áreas de pares clave-valor accesibles desde Window.","evidence_url":"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API."},{"statement":"sessionStorage se separa por origen y pestaña, mientras localStorage se separa por origen y puede persistir entre sesiones.","evidence_url":"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API."},{"statement":"Las operaciones de Web Storage son sincrónicas y pueden bloquear la ejecución de JavaScript mientras terminan.","evidence_url":"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API."},{"statement":"Los navegadores pueden lanzar QuotaExceededError cuando se supera el espacio disponible para un área de almacenamiento.","evidence_url":"https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria"}],"sections":[{"heading":"Qué es Web Storage","paragraphs":["Web Storage es una API del navegador para guardar pares de clave y valor asociados a un origen. Sus dos áreas principales son localStorage y sessionStorage, accesibles desde las propiedades homónimas de Window. La API guarda valores de texto y ofrece métodos para leer, escribir, eliminar y contar entradas.","localStorage se comparte entre documentos del mismo origen y puede persistir cuando se cierra y se vuelve a abrir el navegador. sessionStorage se separa por origen y por pestaña: una página mantiene sus datos durante la sesión de esa pestaña y los pierde al cerrarla.","El origen incluye esquema, host y puerto. Un documento en https no comparte automáticamente su área con otro en http, con un subdominio diferente o con un puerto distinto. Esa separación ayuda a delimitar el acceso, pero no convierte los datos en secretos frente a un script que ya corre dentro del mismo origen."]},{"heading":"LocalStorage y sessionStorage: diferencias prácticas","paragraphs":["Usá localStorage para preferencias que el usuario espera conservar, como tema visual, filtros o el último estado de una interfaz. Usá sessionStorage para datos temporales de un flujo, como un paso de formulario o una selección que no debería aparecer al abrir una pestaña nueva. La decisión depende de la duración y del contexto, no del tamaño.","sessionStorage puede servir para aislar dos pestañas que trabajan con la misma aplicación. localStorage, en cambio, está disponible para otras páginas del mismo origen y puede disparar un evento storage cuando cambia desde otro documento. El evento permite reaccionar a una preferencia compartida, pero no reemplaza la coordinación de una aplicación.","Los valores se convierten en cadenas. Para guardar una estructura hay que serializarla, por ejemplo con JSON.stringify, y comprobar qué ocurre si una versión futura cambia sus campos. No conviene guardar tokens, contraseñas ni información sensible sin analizar el modelo de amenaza: cualquier script del mismo origen puede leer Web Storage."]},{"heading":"Límites, sincronía y errores","paragraphs":["Las operaciones de Web Storage son sincrónicas: leer o escribir bloquea el hilo de JavaScript mientras termina. Para preferencias pequeñas suele ser suficiente, pero una colección grande puede introducir pausas visibles. Si necesitás datos voluminosos, búsquedas, transacciones o trabajo fuera del hilo principal, compará IndexedDB u otra API pensada para ese caso.","El espacio disponible depende del navegador y del origen. MDN documenta un límite típico de hasta 5 MiB para cada área de localStorage y sessionStorage por origen; al superar la cuota, el navegador puede lanzar QuotaExceededError. La aplicación debe capturar la excepción y definir una salida si el almacenamiento no está disponible.","El modo privado puede cambiar la persistencia y borrar los datos al cerrar la ventana. Además, las políticas de privacidad, bloqueadores y configuraciones del usuario pueden impedir o particionar el acceso. La aplicación debe funcionar aunque no pueda escribir una preferencia y no debe tratar una lectura vacía como prueba de que el usuario nunca guardó nada."]},{"heading":"Checklist para elegir localStorage o sessionStorage","paragraphs":["Definí la duración que necesita cada dato: si debe volver al abrir el sitio, localStorage puede encajar; si sólo sirve mientras una pestaña completa un flujo, sessionStorage es más acotado. Confirmá también el origen que leerá el valor y si abrir una segunda pestaña debe verlo.","Guardá sólo valores pequeños y no sensibles, versioná las claves y validá el contenido al leerlo. Envolvé las operaciones en try/catch, manejá QuotaExceededError y ofrecé una ruta que no dependa del almacenamiento. Si el dato cambia en otra pestaña, considerá el evento storage y un estado de interfaz que pueda reconciliarlo.","Antes de elegir Web Storage para una función central, medí el costo de sus operaciones sincrónicas y comparalo con IndexedDB, Cache API o una base remota. La pregunta útil no es cuánto puede guardar el navegador en teoría, sino qué pérdida, exposición o pausa acepta la experiencia concreta."]}],"sources":[{"name":"MDN: Web Storage API","url":"https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API.","kind":"primary"},{"name":"WHATWG HTML: Web storage","url":"https://html.spec.whatwg.org/multipage/webstorage.html","kind":"primary"},{"name":"MDN: Storage quotas and eviction criteria","url":"https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria","kind":"primary"}],"primary_source_gap":null,"images":[{"url":"https://visteesto.com/media/localstorage-sessionstorage-cuando-usar/cover.jpg","alt":"Dos áreas del navegador separan datos persistentes y datos de una pestaña","width":1200,"height":675,"creator":"VisteEsto","license":"VisteEsto editorial","licenseUrl":"https://visteesto.com/terminos","sourceUrl":"https://visteesto.com/nota/localstorage-sessionstorage-cuando-usar","caption":"Ilustración editorial: localStorage persiste por origen y sessionStorage acompaña la sesión de una pestaña."},{"url":"https://visteesto.com/media/localstorage-sessionstorage-cuando-usar/inline-1.jpg","alt":"Origen y pestañas que delimitan Web Storage","width":1200,"height":800,"creator":"VisteEsto","license":"VisteEsto editorial","licenseUrl":"https://visteesto.com/terminos","sourceUrl":"https://visteesto.com/nota/localstorage-sessionstorage-cuando-usar","caption":"Ilustración editorial: el origen y la pestaña determinan quién puede leer cada área."},{"url":"https://visteesto.com/media/localstorage-sessionstorage-cuando-usar/inline-2.jpg","alt":"Cuota y alternativas para guardar datos del navegador","width":1200,"height":800,"creator":"VisteEsto","license":"VisteEsto editorial","licenseUrl":"https://visteesto.com/terminos","sourceUrl":"https://visteesto.com/nota/localstorage-sessionstorage-cuando-usar","caption":"Ilustración editorial: una cuota pequeña y operaciones sincrónicas pueden pedir otra API."}],"videos":[],"update_log":[{"date":"2026-10-04T18:00:00.000Z","note":"Publicación inicial basada en MDN Web Storage, el estándar HTML y la guía de cuotas de almacenamiento de MDN."}],"citation_guidance":{"preferred_url":"https://visteesto.com/nota/localstorage-sessionstorage-cuando-usar","include":["headline","author","date_published_or_modified","preferred_url"]}}