localStorage: datos que sobreviven a la recarga

Desde el módulo 8 arrastras una espina: recargas la página y "Mi Bolsillo" vuelve a nacer vacío. Hoy se acaba: localStorage le da a tu sitio un cajón persistente en el navegador — sin servidor, sin cuenta, sin base de datos. Es la primera API del navegador de este módulo y la que más vas a usar.

El cajón del local

Haz la prueba completa: recarga el preview varias veces (el botón de refresh del playground) y mira el contador crecer — ese número NO vive en tu código ni en variables: vive en el disco, cortesía del navegador. La API es un diccionario simplísimo: setItem(llave, valor), getItem(llave) (con null si no existe — de ahí el chequeo), y removeItem(llave). Existe también localStorage.clear(): vacía TODO el cajón del sitio — respétalo como a un arma.

Solo texto + JSON = objetos persistentes

El cajón guarda strings. ¿Y los gastos de "Mi Bolsillo" — array de objetos? Tu empacadora al vacío del módulo 5 cierra el círculo:

Agrega tres gastos, recarga el preview… y ahí siguen. El patrón de la pareja cargar/guardar — JSON.parse al leer, JSON.stringify al escribir, con el caso null cubierto — es EL rito de localStorage; escríbelo una vez por proyecto y olvídate. Recuerda del módulo 5 qué sobrevive al empaque: datos sí; funciones, fechas como objetos y clases, no (guarda datos crudos y reconstruye).

Tres notas honestas para cerrar: existe el hermano sessionStorage — misma API exacta, pero su cajón se vacía al cerrar la pestaña (útil para "borradores" de una sesión). El cajón es SÍNCRONO y pequeño (~5MB): para datos serios de verdad existe IndexedDB (grande y asíncrona — la conocerás cuando la necesites). Y la regla de seguridad: NUNCA guardes secretos (tokens, contraseñas) en localStorage — cualquier script que corra en tu página puede leerlo; eso te lo resolverán las cookies httpOnly en los supercursos de backend.

Mini-reto

Persistencia con criterio: 1) agrega al playground de gastos un botón "Vaciar" que haga removeItem y repinte; 2) guarda también la fecha del último cambio (new Date().toISOString() — texto, cajón feliz) y píntala; 3) rompe a propósito: guarda un objeto SIN stringify, míralo con getItem, y luego abre las DevTools del navegador → pestaña Application → Local Storage, y observa tu cajón real con todas sus llaves. Conocer esa pestaña te salvará horas.

Qué sigue

Ya persistes datos. La próxima API es de otra familia — los OBSERVERS del navegador — y resuelve algo que en SC-01 hiciste con GSAP: enterarte de cuándo un elemento ENTRA en pantalla, sin espiar el scroll a cada milisegundo. IntersectionObserver: el portero que avisa.