Necesitas persistir algo en el navegador. ¿Cómo eliges entre localStorage, sessionStorage, cookies e IndexedDB?

Usa cookies solo cuando el servidor necesita el valor en cada petición, y pon HttpOnly, Secure y SameSite para cualquier cosa sensible. Usa sessionStorage para estado que debe morir con la pestaña, localStorage para datos clave valor pequeños y síncronos que sobreviven a reinicios, e IndexedDB para cualquier cosa grande, estructurada o asíncrona. Nunca guardes tokens ni datos personales en localStorage, porque cualquier script de la página puede leerlos.

Mi primera pregunta es si el servidor lo necesita. Si lo necesita, es una cookie, y lleva HttpOnly, Secure y SameSite, lo que además significa que no es algo que lea mi JavaScript. Si solo lo necesita el cliente, entonces se reduce a duración y tamaño. sessionStorage para cosas con alcance de pestaña, como un paso de asistente o una posición de scroll que no quiero que se filtre a otra pestaña. localStorage para preferencias pequeñas y duraderas, tema, último filtro usado, cosas así, y lo mantengo pequeño porque es síncrono, así que un JSON enorme parseado al arrancar aparece directamente en mi tiempo hasta interactivo. IndexedDB en cuanto los datos son grandes o estructurados, por ejemplo una lista de registros cacheada para uso sin conexión, normalmente detrás de una pequeña envoltura porque la API cruda es desagradable. La regla que no negocio es que los tokens de acceso no van en localStorage, porque cualquier script inyectado puede leerlos; esos viven en una cookie HttpOnly o solo en memoria.