Web Storage API (LocalStorage y sessionStorage)

Domina la Web Storage API para gestionar datos en el cliente de forma eficiente. Aprende a implementar localStorage para persistencia a largo plazo y sessionStorage para datos volátiles de sesión. Optimiza la UX y el rendimiento de tus aplicaciones JavaScript con esta guía técnica profesional.

1. ¿Qué es Web Storage API?

La Web Storage API es un mecanismo que permite a las aplicaciones web almacenar datos de forma local, segura y persistente directamente en el navegador del usuario.

A diferencia de las antiguas cookies, esta API ofrece una capacidad de almacenamiento mucho mayor (generalmente hasta 5MB o más) y una interfaz de programación más intuitiva basada en el modelo clave-valor.

1.1. ¿Cómo funciona su arquitectura?

A diferencia de las bases de datos tradicionales del lado del servidor, la Web Storage API opera íntegramente en el cliente. Esto reduce la latencia, ya que los datos no viajan en cada cabecera HTTP, optimizando el rendimiento de la aplicación y mejorando la experiencia del usuario (UX).

Se divide principalmente en dos objetos de almacenamiento:

1. localStorage:
   • Diseñado para la persistencia a largo plazo. Los datos guardados aquí no tienen fecha de expiración y permanecen disponibles incluso después de cerrar el navegador o reiniciar el dispositivo.
   • Es ideal para guardar configuraciones de modo oscuro, tokens de sesión de larga duración o preferencias de personalización.
2. sessionStorage:
   • Enfocado en la volatilidad. El ciclo de vida de los datos está ligado a la pestaña o ventana activa. Una vez que el usuario cierra la pestaña, la información se elimina automáticamente.
   • Es perfecto para manejar estados temporales en formularios de varios pasos o datos de una navegación única.

1.2. Características técnicas y ventajas para el desarrollo con JavaScript

Para los desarrolladores de JavaScript, la Web Storage API es una herramienta indispensable gracias a su simplicidad y eficiencia:

Interfaz Basada en Métodos

Utiliza una sintaxis sencilla y declarativa mediante métodos como setItem(), getItem(), removeItem() y clear().

Almacenamiento de Strings

Aunque solo almacena cadenas de texto, se integra perfectamente con JSON.stringify() y JSON.parse(), permitiendo guardar objetos y arrays complejos de forma estructurada.

Aislamiento por Origen (Same-origin policy)

Los datos están protegidos y solo son accesibles por el mismo dominio y protocolo que los creó, garantizando un nivel básico de seguridad y privacidad. Evita accesos no autorizados desde otros sitios.

Capacidad Extendida

Supera con creces el límite de 4KB de las cookies, permitiendo arquitecturas de aplicaciones más robustas que pueden funcionar parcialmente sin conexión (Offline-first).

1.3. ¿Para qué sirve? Ejemplos

Su propósito principal es mejorar la experiencia del usuario y el rendimiento técnico de la web.

Aquí te detallo sus utilidades más prácticas y estratégicas:

1. Persistencia de Preferencias de Usuario: Es la herramienta número uno para guardar configuraciones personalizadas que el usuario no quiere volver a ajustar cada vez que entra al sitio.
   • Ejemplos: El estado del «Modo Oscuro», el idioma preferido, o el tamaño de la fuente.
   • Valor: Evita el molesto «parpadeo» de contenido no configurado al cargar la página.
2. Gestión de Estados de Sesión y Seguridad: Permite mantener al usuario identificado o recordar sus acciones inmediatas.
   • Ejemplos: Guardar tokens de autenticación (JWT) de forma temporal o recordar que un usuario ya cerró un «pop-up» de anuncio para no mostralo de nuevo durante esa navegación.
   • Diferencia: Aquí es donde el sessionStorage brilla, ya que limpia los datos al cerrar la pestaña, protegiendo la privacidad en equipos compartidos.
3. Optimización del Rendimiento (Caching de Datos): Sirve para almacenar resultados de consultas a una API que no cambian frecuentemente.
   • Ejemplo: Si tu aplicación descarga una lista de categorías de productos, puedes guardarla en localStorage. La próxima vez que el usuario navegue, la carga será instantánea porque no hay una petición de red.
   • Impacto SEO: Al reducir el tiempo de carga (LCP), los buscadores penalizan menos tu sitio.
4. Recuperación de Datos en Formularios: ¿Alguna vez has llenado un formulario largo, se refrescó la página por error y los datos seguían ahí? Eso es Web Storage.
   • Función: Guardar los valores de los inputs en tiempo real. Si el navegador falla o el usuario retrocede, los datos se recuperan desde el almacenamiento local, evitando la frustración de reescribir todo.

2. LocalStorage

1. ¿Qué es localStorage?
2. ¿Cómo funciona?
3. Características principales
4. ¿Cuándo conviene usar localStorage?
5. ¿Cuándo no conviene usarlo?
6. Ejemplo: Guardar datos con setItem():
7. Ejemplo: Recuperar un dato usando getItem()
8. Ejemplo: Eliminar un valor específico con removeItem():
9. Ejemplo: Borrar todos los datos con  clear():
10. Guardar objetos o arrays en localStorage

2.1. ¿Qué es localStorage?

Como dijimos, localStorage es uno de los dos mecanismos principales de la Web Storage API y sirve para guardar datos en el navegador del usuario de forma persistente. Esto significa que la información almacenada permanece disponible incluso si el usuario cierra la pestaña, reinicia el navegador o vuelve a entrar al sitio días después.

En JavaScript, localStorage se utiliza para almacenar pares de clave y valor. Tanto la clave como el valor se guardan como texto, por lo que si quieres almacenar objetos, arrays o datos más complejos, primero debes convertirlos a formato JSON.

POR EJEMPLO, si un usuario activa el modo oscuro en un sitio web, puedes guardar esa preferencia para que el sitio recuerde automáticamente esa configuración la próxima vez que el usuario vuelva.

2.2. ¿Cómo funciona?

Para guardar un dato en localStorage, se utiliza el método setItem():

// Guarda el tema elegido por el usuario
localStorage.setItem("tema", "oscuro");Lenguaje del código: JavaScript (javascript)

Para recuperar un dato, se utiliza getItem():

// Obtiene el valor guardado anteriormente
const tema = localStorage.getItem("tema");

console.log(tema); // "oscuro"Lenguaje del código: JavaScript (javascript)

También es posible eliminar un valor específico con removeItem():

// Elimina únicamente la clave "tema"
localStorage.removeItem("tema");Lenguaje del código: JavaScript (javascript)

Y si deseas borrar todos los datos guardados por ese sitio web, puedes usar clear():

// Borra todos los datos almacenados en localStorage
localStorage.clear();Lenguaje del código: JavaScript (javascript)

Cuando necesitas guardar objetos o arrays, debes convertirlos usando JSON.stringify() y luego recuperarlos con JSON.parse():

// Objeto JavaScript
const usuario = {
  nombre: "Manuel",
  edad: 28
};

// Convertimos el objeto a texto JSON antes de guardarlo
localStorage.setItem("usuario", JSON.stringify(usuario));

// Recuperamos el texto guardado
const usuarioGuardado = localStorage.getItem("usuario");

// Convertimos nuevamente el texto a objeto
const usuarioConvertido = JSON.parse(usuarioGuardado);

console.log(usuarioConvertido.nombre); // "Manuel"Lenguaje del código: JavaScript (javascript)

2.3. Características principales

• Los datos permanecen guardados hasta que se eliminan manualmente.
• Solo puede almacenar texto.
• Tiene una capacidad aproximada de entre 5 MB y 10 MB, dependiendo del navegador.
• Los datos son específicos de cada dominio o sitio web.
• No comparte información automáticamente con el servidor.

2.4. ¿Cuándo conviene usar localStorage?

localStorage es una buena opción cuando necesitas guardar datos que deben persistir entre visitas del usuario, por ejemplo:

• Recordar un tema visual
• Mantener un carrito de compras
• Guardar filtros de búsqueda
• Recordar configuraciones de una aplicación
• Conservar información de formularios incompletos

2.5. ¿Cuándo no conviene usarlo?

No deberías guardar información sensible en localStorage, como:

• Contraseñas
• Tokens de autenticación importantes
• Datos bancarios
• Información privada del usuario

Esto se debe a que cualquier script que se ejecute en la página puede acceder a esos datos.

2.6. Ejemplo: Guardar datos con setItem():

ESCENARIO: Persistencia del «Modo Oscuro» (Dark Mode)

Imagina que un usuario visita tu blog o tutorial. El diseño por defecto es claro, pero el usuario prefiere el Modo Oscuro para no cansar la vista.

El problema: Si solo cambias el diseño con CSS/JS, al refrescar la página o navegar a otro artículo, el sitio volverá a ser claro, obligando al usuario a cambiarlo manualmente una y otra vez.

La solución: Usar localStorage.setItem() para grabar esa preferencia en el navegador. Así, la web «recuerda» la elección del usuario de forma permanente.

CÓDIGO:

Este código detecta cuando el usuario hace clic en un botón para cambiar el tema y guarda esa elección.

// 1. Seleccionamos el botón de cambio de tema
const botonTema = document.querySelector('#btn-tema');

// 2. Escuchamos el evento click
botonTema.addEventListener('click', () => {
    // Alternamos una clase en el body (ej. "dark-mode")
    document.body.classList.toggle('dark-mode');

    // 3. Verificamos si el modo oscuro está activo actualmente
    const modoOscuroActivo = document.body.classList.contains('dark-mode');

    // 4. GUARDAR LA PREFERENCIA (El corazón del proceso)
    // Guardamos la clave 'temaPreferido' con el valor 'oscuro' o 'claro'
    if (modoOscuroActivo) {
        localStorage.setItem('temaPreferido', 'oscuro');
    } else {
        localStorage.setItem('temaPreferido', 'claro');
    }
    
    console.log("Preferencia guardada en el navegador.");
});Lenguaje del código: JavaScript (javascript)

EXPLICACIÓN:

En este ejemplo, la línea localStorage.setItem('temaPreferido', 'oscuro'); funciona como una etiqueta en un archivador:

1. localStorage:
   • Es el mueble archivador que el navegador nos presta.
2. El método setItem(clave, valor)
   • Cuando ejecutas localStorage.setItem('temaPreferido', 'oscuro'), le estás dando dos instrucciones al navegador:
     • La clave ('temaPreferido'): Es el nombre de la etiqueta que pegamos en el dato para encontrarlo después. Es como el nombre de una variable, pero persistente.
     • El valor ('oscuro'): Es la información real que queremos conservar.

Al ejecutar esta línea, el navegador escribe en el disco duro del usuario: «Para este sitio web (dominio), la clave ‘temaPreferido’ tiene el valor ‘oscuro'».

RESULTADO ESPERADO:

Al ejecutar este código y hacer clic en el botón, sucederá lo siguiente:

1. Visualmente: El fondo de la pantalla cambiará de color (siempre que tengas el CSS correspondiente).
2. En el almacenamiento: Si abres las herramientas de desarrollador (F12) y vas a la pestaña Application -> Local Storage, verás una nueva entrada:
   • Key (Clave): temaPreferido
   • Value (Valor): oscuro

¿Por qué llegamos a este resultado?
Llegamos a este resultado porque la Web Storage API permite que JavaScript acceda a un espacio de memoria persistente fuera del ciclo de vida del script actual. Al usar setItem, el navegador confirma la escritura y mantiene el dato disponible indefinidamente.

Esto es lo que permite que, en una futura carga de la página, podamos usar getItem('temaPreferido') y aplicar el color correcto antes de que el usuario haga nada, creando una navegación fluida y profesional.

2.7. Ejemplo: Recuperar un dato usando getItem()

ESCENARIO: Aplicación automática del tema al cargar la página (continuación del ejemplo anterior)

Imagina que el usuario configuró el «Modo Oscuro» ayer y hoy regresa a la web

El problema: Aunque el dato está guardado en el disco duro, el navegador por defecto siempre carga el HTML/CSS original (Modo Claro). Si no le decimos a JavaScript que revise el almacenamiento apenas cargue la página, el usuario sufrirá un «destello» de luz blanca antes de poder activar su modo preferido.

La solución: Usar localStorage.getItem() al inicio del script para recuperar la preferencia y aplicarla al body antes de que el usuario interactúe.

CÓDIGO AGREGANDO localStorage.getItem()

Añadimos la lógica de recuperación al principio para que el navegador actúe de inmediato al cargar.

// --- BLOQUE DE RECUPERACIÓN (Se ejecuta al cargar la página) ---

// 1. Intentamos obtener el dato guardado bajo la clave 'temaPreferido'
const temaGuardado = localStorage.getItem('temaPreferido');

// 2. Si el dato existe y es igual a 'oscuro', aplicamos la clase al body
if (temaGuardado === 'oscuro') {
    document.body.classList.add('dark-mode');
    console.log("Tema oscuro recuperado y aplicado automáticamente.");
}


// --- BLOQUE DE GUARDADO (Lógica del botón que ya tenías) ---

const botonTema = document.querySelector('#btn-tema');

botonTema.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
    const modoOscuroActivo = document.body.classList.contains('dark-mode');

    // Usamos setItem para que la próxima vez que cargue la página, 
    // el bloque de arriba encuentre el valor correcto
    if (modoOscuroActivo) {
        localStorage.setItem('temaPreferido', 'oscuro');
    } else {
        localStorage.setItem('temaPreferido', 'claro');
    }
});
Lenguaje del código: JavaScript (javascript)

EXPLICACIÓN: El método getItem(clave)

En este contexto, la línea const temaGuardado = localStorage.getItem('temaPreferido'); funciona como una consulta de memoria:

1. getItem('temaPreferido'):
   • Es como preguntarle al archivador: «¿Tienes alguna carpeta llamada ‘temaPreferido’?».
2. Si existe:
   • El método te devuelve el texto (ej. 'oscuro').
3. Si NO existe:
   • El método devuelve null. Por eso usamos un if, para que si el usuario es nuevo y no tiene nada guardado, el código no falle y simplemente se quede en el modo claro por defecto.

Al poner este código fuera de cualquier función (en el «hilo principal»), garantizamos que sea de las primeras cosas que JavaScript haga al cargar el sitio.

RESULTADO ESPERADO

Al refrescar la página (F5) o cerrar y volver a abrir el navegador, sucederá lo siguiente:

1. Inmediatez: Antes de que el usuario haga clic en nada, la pantalla aparecerá oscura (si así lo eligió antes).
2. Consistencia: El usuario siente que el sitio web «lo conoce» y respeta sus preferencias en todas las secciones del tutorial.
3. Persistencia: Puedes apagar la computadora, volver en una semana, y getItem('temaPreferido') seguirá devolviendo 'oscuro'.

¿Por qué llegamos a este resultado?
Llegamos aquí porque combinamos las dos funciones vitales de la Web Storage API: setItem para escribir y getItem para leer. Esta técnica es la base de la experiencia de usuario (UX) moderna, permitiendo que las aplicaciones web mantengan su «estado» de forma local, rápida y sin necesidad de consultar a un servidor externo.

2.8. Ejemplo: Eliminar un valor específico con removeItem():

ESCENARIO: Restablecer preferencias (Reset to Default)

Imagina que el usuario ha personalizado tanto su interfaz que ahora prefiere volver a la configuración original del sitio (la que tú definiste por defecto).

El problema: Si solo usamos setItem, siempre estaremos forzando un valor u otro (‘oscuro’ o ‘claro’). Si queremos que el sitio simplemente «deje de decidir» y vuelva a su estado natural (o si queremos liberar espacio), necesitamos borrar la clave por completo.

La solución: Implementar un botón de «Restablecer» que ejecute localStorage.removeItem(). Esto elimina la carpeta del archivador, dejando el almacenamiento limpio para esa clave específica.

CÓDIGO: Implementación del botón de reset

Añadimos un tercer bloque de código para gestionar la eliminación de la preferencia.

// 1. Seleccionamos el botón de restablecer
const botonReset = document.querySelector('#btn-reset');

// 2. Escuchamos el evento click para limpiar el dato
botonReset.addEventListener('click', () => {
    
    // 3. ELIMINAR EL DATO ESPECÍFICO
    // Esto borra la clave 'temaPreferido' y su valor asociado
    localStorage.removeItem('temaPreferido');

    // 4. Actualizamos la interfaz de inmediato
    // Quitamos la clase oscura para volver al modo por defecto del CSS
    document.body.classList.remove('dark-mode');

    console.log("Preferencia eliminada. Volviendo al estado inicial.");
});Lenguaje del código: JavaScript (javascript)

EXPLICACIÓN: El método removeItem(clave)

Cuando ejecutas localStorage.removeItem('temaPreferido'), le estás dando una orden de borrado selectivo al navegador:

1. La Clave ('temaPreferido'):
   • Es el nombre exacto de la «etiqueta» que queremos destruir.
2. Comportamiento:
   • A diferencia de clear(), que borra todo lo que el sitio haya guardado, removeItem() es quirúrgico: solo elimina la carpeta que le pidas.
3. Si la clave no existe:
   • El método no hace nada y no arroja ningún error, lo cual lo hace muy seguro de usar en cualquier momento.

Al ejecutar esta línea, el navegador busca en el disco duro y dice: «Para este dominio, ya no existe la información sobre ‘temaPreferido'».

RESULTADO ESPERADO

Al hacer clic en el botón de restablecer, sucederá lo siguiente:

1. Visualmente: El sitio web volverá instantáneamente a su esquema de colores original (modo claro).
2. En el almacenamiento: Si revisas la pestaña Application -> Local Storage en las herramientas de desarrollador, verás que la fila temaPreferido ha desaparecido por completo.
3. Persistencia del borrado: Si el usuario refresca la página, nuestro código anterior de getItem() devolverá null, por lo que el sitio se mantendrá en modo claro hasta que el usuario decida elegir un tema nuevo.

2.9. Ejemplo: Borrar todos los datos con  clear():

ESCENARIO: Limpieza total de datos (Sistema de mantenimiento)

Imagina que tu aplicación ha crecido y ahora guarda muchas cosas: el modo oscuro, el nombre del usuario, el último artículo leído y filtros de búsqueda.

El problema: El usuario siente que la aplicación está actuando de forma errática o simplemente quiere cerrar su sesión y borrar todo rastro de su actividad en ese equipo (por ejemplo, porque está en una computadora pública). Ir borrando clave por clave sería ineficiente y propenso a errores.

La solución: Implementar una función de «Cerrar Sesión y Limpiar» que ejecute localStorage.clear(). Esto garantiza que el archivador del navegador para tu dominio quede totalmente vacío en un solo paso.

CÓDIGO: Implementación de limpieza masiva

Este código muestra cómo vaciar por completo el almacenamiento local asociado a tu web.

// 1. Seleccionamos el botón de limpieza profunda
const botonCerrarSesion = document.querySelector('#btn-logout');

// 2. Escuchamos el evento click
botonCerrarSesion.addEventListener('click', () => {
    
    // 3. LA ACCIÓN DEFINITIVA: Borrar todo
    // No necesita claves ni argumentos; vacía el localStorage del dominio
    localStorage.clear();

    // 4. Feedback visual y redirección
    alert("Todos tus datos locales han sido eliminados.");
    
    // Opcional: Recargar la página para que el sitio vuelva a su estado virgen
    window.location.reload();

    console.log("Almacenamiento local vaciado con éxito.");
});Lenguaje del código: JavaScript (javascript)

EXPLICACIÓN: El método clear()

Cuando ejecutas localStorage.clear(), le das una orden de formateo al navegador para tu sitio específico:

1. Sin argumentos:
   • A diferencia de los otros métodos, clear() no necesita que le digas qué borrar. Su función es absoluta.
2. Alcance local:
   • Es importante aclarar que solo borra los datos de tu sitio web. No afectará los datos de Google, Facebook o cualquier otra página que el usuario tenga abierta.
3. Impacto:
   • Es una operación muy rápida pero irreversible desde el código. Una vez ejecutada, no hay forma de recuperar los datos a menos que el usuario los vuelva a generar.

RESULTADO ESPERADO

Al hacer clic en el botón de cerrar sesión/limpiar, sucederá lo siguiente:

1. En el almacenamiento: Si vas a la pestaña Application -> Local Storage, verás que la tabla está completamente gris y vacía. Ya no hay rastro de temaPreferido, usuario_nombre ni ninguna otra clave.
2. Estado de la Aplicación: Al recargar, la web se comportará como si fuera la primerísima vez que el usuario la visita.
3. Seguridad: El usuario puede estar tranquilo de que su información local ha sido destruida en ese dispositivo.

2.10. Guardar objetos o arrays en localStorage

Guardar objetos o arrays en localStorage es una práctica fundamental en JavaScript cuando necesitas persistir datos complejos en el navegador, como listas de tareas, configuraciones de usuario o datos obtenidos desde una API.

Sin embargo, localStorage tiene una limitación importante: solo puede almacenar strings (cadenas de texto).

Por eso, para trabajar con estructuras más complejas como objetos {} o arrays [], es necesario convertirlos a texto antes de guardarlos y volver a convertirlos a su formato original cuando se recuperan. Este proceso es clave en el desarrollo web moderno y se utiliza constantemente en proyectos reales.

¿Qué significa guardar objetos o arrays en localStorage?

Significa transformar estructuras de datos de JavaScript (como objetos o arrays) en un formato que localStorage pueda almacenar, y luego poder recuperarlas y utilizarlas nuevamente en tu aplicación.

Este proceso se realiza utilizando dos métodos esenciales:

• JSON.stringify() → Convierte objetos o arrays en string.
• JSON.parse() → Convierte el string nuevamente en objeto o array.

Ejemplo práctico:

// Creamos un array de tareas
const tareas = [
  { id: 1, texto: "Aprender JavaScript", completada: false },
  { id: 2, texto: "Practicar localStorage", completada: true }
];

// Convertimos el array a string y lo guardamos
localStorage.setItem("tareas", JSON.stringify(tareas));Lenguaje del código: JavaScript (javascript)

En este punto, el array ya está almacenado en el navegador como texto.

Ahora, para recuperarlo:

// Obtenemos el string desde localStorage
const tareasGuardadas = localStorage.getItem("tareas");

// Lo convertimos nuevamente a array
const tareasParseadas = JSON.parse(tareasGuardadas);

// Ya podemos usarlo como un array normal
console.log(tareasParseadas);Lenguaje del código: JavaScript (javascript)

Resultado esperado:

[
  { id: 1, texto: "Aprender JavaScript", completada: false },
  { id: 2, texto: "Practicar localStorage", completada: true }
]Lenguaje del código: JavaScript (javascript)

Este flujo es esencial en cualquier aplicación web que necesite:

• Persistir datos sin usar un backend.
• Mantener información tras recargar la página.
• Reducir llamadas innecesarias a una API.
• Mejorar la experiencia del usuario.

Ejemplo real guardando un array de objetos

ESCENARIO: Gestión de un carrito de compras (Shopping Cart)

Imagina que estás construyendo una tienda online. Un usuario navega por tu catálogo y añade varios productos a su carrito.

El problema: Si el usuario refresca la página por accidente o se queda sin conexión un momento, perderá toda su selección si esta solo vive en la memoria volátil de JavaScript. No podemos guardar cada producto en una clave distinta de localStorage porque no sabemos cuántos productos elegirá el usuario.

La solución: Agrupar todos los productos en un Array de Objetos y guardarlo como una sola entidad bajo la clave 'carrito'. Así, la experiencia de compra es fluida y persistente.

CÓDIGO: Implementación de guardado estructural

// 1. Nuestra estructura de datos (Array de Objetos)
const carritoDeCompras = [
    { id: 101, nombre: "Teclado Mecánico", precio: 85.00 },
    { id: 102, nombre: "Mouse Gamer", precio: 45.00 }
];

// 2. EL PROCESO CRÍTICO: Serialización
// Convertimos el array complejo en una cadena de texto JSON
const carritoConvertidoAString = JSON.stringify(carritoDeCompras);

// 3. GUARDAR EN LOCALSTORAGE
// Usamos setItem para almacenar la cadena de texto
localStorage.setItem('carrito', carritoConvertidoAString);

console.log("Carrito de compras guardado con éxito.");Lenguaje del código: JavaScript (javascript)

EXPLICACIÓN: ¿Por qué es necesario este proceso?

1. Sin JSON.stringify():
   • Si intentaras hacer localStorage.setItem('carrito', carritoDeCompras), el navegador intentaría convertir el array a texto de forma automática y fallida, guardando simplemente "[object Object],[object Object]". Al intentar recuperarlo, habrías perdido toda la información de los precios e IDs.
2. Con JSON.stringify():
   • Esta función toma tu estructura de datos viva (con sus corchetes, llaves y tipos numéricos) y la traduce a un formato de texto universal que localStorage sí puede almacenar sin corromperlo.

Es, literalmente, «empaquetar» una estructura tridimensional de datos en una línea de texto plana para que quepa en el archivador del navegador.

RESULTADO ESPERADO

Al ejecutar este código, el resultado en el navegador será el siguiente:

1. En el almacenamiento interno: Si entras a la consola de desarrollador (F12 -> Application -> Local Storage), verás:
   • Key: carrito
   • Value: [{"id":101,"nombre":"Teclado Mecánico","precio":85},{"id":102,"nombre":"Mouse Gamer","precio":45}]
2. Integridad de Datos: A diferencia de un string simple, ahora tienes una estructura que conserva el tipo de dato (los precios siguen siendo números y los IDs también), lo que permitirá que luego puedas sumar el total del carrito fácilmente.

3. SessionStorage

1. Diferencias clave: sessionStorage vs. localStorage
2. ¿Cuándo usar cada uno?
3. ¿Cómo usar sessionStorage?
4. Ejemplo práctico:

sessionStorage es una API del navegador que permite almacenar datos en formato clave–valor de MANERA TEMPORAL, es decir, solo mientras la pestaña del navegador permanece abierta. Forma parte de la Web Storage API y se utiliza para guardar información que no necesita persistir a largo plazo.

A diferencia de las variables de JavaScript, los datos en sessionStorage sobreviven a recargas de página, pero se eliminan automáticamente cuando el usuario cierra la pestaña o ventana.

3.1. Diferencias clave: sessionStorage vs. localStorage

3.1.1. Persistencia (Duración de los datos)

localStorage:
Los datos son persistentes. No tienen fecha de expiración. Permanecen ahí aunque cierres la pestaña, el navegador o reinicies el ordenador. Solo se borran mediante código (clear(), removeItem()) o si el usuario limpia manualmente su caché.

sessionStorage:
Los datos son efímeros. Se eliminan automáticamente en el momento en que el usuario cierra la pestaña o la ventana donde se generaron. Sobreviven a recargas de página (F5), pero no al cierre del contexto de navegación.

3.1.2. Alcance (Scope y Visibilidad)

localStorage:
Es compartido entre todas las pestañas y ventanas que tengan el mismo origen (mismo dominio, protocolo y puerto). Si cambias algo en la Pestaña A, la Pestaña B lo verá instantáneamente.

sessionStorage:
Es restringido a la pestaña actual. Incluso si tienes dos pestañas abiertas con la misma URL, cada una tendrá su propio «cubo» de almacenamiento independiente. Los datos no se filtran entre ellas.

3.1.3. Capacidad de Almacenamiento

Ambos suelen ofrecer entre 5MB y 10MB dependiendo del navegador, lo cual es significativamente superior a los 4KB de las cookies tradicionales.

3.1.4. Tabla comparativa

3.2. ¿Cuándo usar cada uno?

1. Usa localStorage para:
   • Información que el usuario espera encontrar mañana. Ejemplo: El idioma seleccionado, un token de acceso de larga duración o la configuración de una interfaz personalizada.
2. Usa sessionStorage para:
   • Información sensible o temporal que solo tiene sentido en el «aquí y ahora». Ejemplo: Un código de verificación de un solo uso, el estado de un asistente virtual (chatbot) durante la navegación o datos de un formulario de registro que no quieres que se queden guardados si el usuario abandona el sitio.

3.3. ¿Cómo usar sessionStorage?

El uso de sessionStorage es idéntico en sintaxis a localStorage. La diferencia real reside en el comportamiento del navegador: los datos solo vivirán mientras la pestaña permanezca abierta.

Métodos esenciales de la API

1. sessionStorage.setItem('clave', 'valor'):
   • Guarda un dato en la pestaña actual.
2. sessionStorage.getItem('clave'):
   • Recupera el valor asociado.
3. sessionStorage.removeItem('clave'):
   • Elimina un dato específico.
4. sessionStorage.clear():
   • Limpia todo el almacenamiento de la sesión actual.

3.4. Ejemplo práctico:

ESCENARIO: Almacenar el progreso de un formulario dinámico

Imagina un formulario de registro de varios pasos (paso 1: datos personales, paso 2: dirección).

El problema: Si el usuario está en el paso 2 y refresca la página por error, perderá lo que escribió en el paso 1. Sin embargo, no queremos guardar estos datos de forma permanente en localStorage porque son datos sensibles y temporales.

La solución: Usar sessionStorage para mantener los datos vivos solo durante la navegación activa.

CÓDIGO: Guardado y recuperación de sesión

// 1. Supongamos que el usuario escribe su correo en un input
const inputEmail = document.querySelector('#email-field');

// 2. Guardamos el dato mientras escribe (setItem)
inputEmail.addEventListener('input', () => {
    sessionStorage.setItem('email_temporal', inputEmail.value);
});

// 3. Al cargar la página, recuperamos el dato (getItem)
window.addEventListener('load', () => {
    const emailRecuperado = sessionStorage.getItem('email_temporal');
    
    if (emailRecuperado) {
        inputEmail.value = emailRecuperado;
        console.log("Dato temporal recuperado de la sesión.");
    }
});Lenguaje del código: JavaScript (javascript)

EXPLICACIÓN:

La línea clave aquí es sessionStorage.setItem('email_temporal', inputEmail.value);.

1. Contexto de pestaña:
   • A diferencia de localStorage, si el usuario abre la web en una nueva pestaña, el sessionStorage estará vacío. Esto es ideal para aplicaciones que permiten manejar múltiples cuentas o procesos independientes en ventanas diferentes.
2. Seguridad:
   • Al cerrarse la pestaña, el navegador destruye automáticamente estos datos. Esto reduce la superficie de ataque para scripts maliciosos que busquen información residual en el disco duro.

RESULTADO ESPERADO:

Al aplicar este código en tu tutorial:

1. Persistencia en recarga: Si el usuario pulsa F5, el correo seguirá en el campo de texto.
2. Limpieza automática: Si el usuario cierra la pestaña y vuelve a entrar minutos después, el campo estará vacío.
3. Aislamiento: Si el usuario tiene dos pestañas abiertas de tu sitio, puede escribir correos diferentes en cada una sin que se interfieran.

4. ¿Dónde se guardan los datos de Web Storage?

Aunque nosotros interactuamos con ellos mediante JavaScript, el navegador debe persistirlos en el sistema operativo.

Aquí es donde ocurre la magia:

4.1. localStorage: El disco duro

Los datos de localStorage se escriben en el almacenamiento local del dispositivo (disco duro o SSD). El navegador crea un archivo de base de datos ligero (usualmente en formato SQLite) dentro de las carpetas de usuario del sistema operativo.

• En Windows (Chrome/Edge): Se suelen encontrar en una ruta similar a: %LocalAppData%\Google\Chrome\User Data\Default\Local Storage\leveldb
• En macOS: Generalmente en: ~/Library/Application Support/Google/Chrome/Default/Local Storage/leveldb

¿Qué significa esto? Que si apagas la computadora, el archivo sigue ahí. Por eso los datos no se borran al reiniciar.

4.2. sessionStorage: La Memoria RAM

A diferencia de su hermano, sessionStorage vive principalmente en la memoria RAM asignada al proceso de la pestaña específica del navegador.

• Ubicación lógica: Se guarda en una estructura de datos interna del motor del navegador (como V8 en Chrome).
• Comportamiento: Al cerrar la pestaña, el sistema operativo libera ese espacio de la memoria RAM y, por lo tanto, los datos desaparecen instantáneamente. No se escriben de forma permanente en un archivo de base de datos a largo plazo como sucede con localStorage.

4.3. ¿Cómo verlos tú mismo (El «Donde» visual)?

Para un desarrollador, el «donde» más importante es la consola de herramientas de desarrollo. Puedes ver estos datos en tiempo real siguiendo estos pasos:

1. Abre tu navegador y presiona F12 (o clic derecho -> Inspeccionar).
2. Ve a la pestaña superior llamada Application (en Chrome/Edge) o Storage (en Firefox).
3. En el menú lateral izquierdo, despliega la sección Local Storage o Session Storage.
4. Haz clic en el dominio de tu página (ej: https://tuweb.com).

5. Diferencia entre cookies y Web Storage

Entender la diferencia entre cookies y Web Storage (localStorage y sessionStorage) es clave para elegir la mejor opción al almacenar datos en el navegador. Aunque ambos permiten persistir información en el cliente, su funcionamiento, alcance y uso práctico son muy distintos.

Como ya dijimos en todo este artículo, las cookies son pequeños fragmentos de datos que se almacenan en el navegador y se envían automáticamente al servidor en cada petición HTTP.

COOKIES:

Se utilizan principalmente para:

• Autenticación (sesiones)
• Seguimiento de usuarios
• Preferencias simples

WEB STORAGE:

• localStorage → almacenamiento persistente
• sessionStorage → almacenamiento temporal (hasta cerrar la pestaña)

A diferencia de las cookies:

• No se envían al servidor
• Solo se usan del lado del cliente

5.1. Comunicación con el servidor

• Cookies → se envían automáticamente en cada request
• Web Storage → no se envía, solo accesible desde JavaScript

Impacto:

• Cookies → más carga en cada petición
• Web Storage → mejor rendimiento

5.2. Capacidad de almacenamiento

• Cookies → ~4KB por cookie
• Web Storage → ~5MB por dominio

Web Storage es ideal para más datos.

5.3. Persistencia

• Cookies → configurable (expires, max-age)
• localStorage → persiste hasta que se borra manualmente
• sessionStorage → se elimina al cerrar la pestaña

5.4. Acceso desde JavaScript

• Cookies → document.cookie (string, requiere parsing)
• Web Storage → API sencilla tipo objeto

// localStorage
localStorage.setItem("usuario", "Manuel");
const usuario = localStorage.getItem("usuario");

// Cookies
document.cookie = "usuario=Manuel";Lenguaje del código: JavaScript (javascript)

5.5. Seguridad

• Cookies → pueden ser más seguras con HttpOnly, Secure, SameSite
• Web Storage → vulnerable a XSS si no se protege bien

Cookies son mejores para autenticación (con backend).

5.6. Facilidad de uso

• Cookies → más complejas (string + parsing)
• Web Storage → más simple y directa

5.7. Ejemplo práctico comparativo

Guardar tema con cookies

document.cookie = "tema=oscuro; max-age=604800; path=/";Lenguaje del código: JavaScript (javascript)

Guardar tema con localStorage

localStorage.setItem("tema", "oscuro");Lenguaje del código: JavaScript (javascript)

Con localStorage no necesitás parsing ni configuración extra.

5.8. ¿Cuándo usar cada uno?

Usar cookies cuando:

• Necesitás enviar datos al servidor
• Manejas autenticación/sesiones
• Requerís control avanzado de seguridad

Usar Web Storage cuando:

• Solo trabajás en el cliente (DOM)
• Guardás preferencias o estado UI
• Necesitás más capacidad y simplicidad

5.9. Error común

//  Usar cookies para todo
document.cookie = "datosApp=...";

//  Mejor opción
localStorage.setItem("datosApp", JSON.stringify(data));Lenguaje del código: JavaScript (javascript)

5.10. Conclusión

La diferencia entre cookies y Web Storage radica en su propósito:

• Cookies → comunicación cliente-servidor
• Web Storage → almacenamiento local eficiente

Elegir correctamente mejora el rendimiento, la seguridad y la arquitectura de tu aplicación.