Local Storage - Session Storage

Ambas herramientas permiten guardar información en el navegador. Antes de tocar una sola línea de código debemos recordar que tanto LocalStorage como SessionStorage SOLO pueden almacenar texto plano (strings) usando pares de clave: valor. No entienden de objetos, ni de arrays, ni de números; para ellas, todo en la vida es un texto. ## Los 5 Métodos de Local Storage y Session Storage

Tanto localStorage como sessionStorage (reunidas bajo el nombre de Web Storage API) comparten exactamente los mismos métodos. Con lo cual, si se aprende a usar una, automáticamente se sabes usar la otra. Lo único que cambia es el nombre del objeto global (localStorage o sessionStorage). Los 5 métodos son:

1. Guardar datos: .setItem(clave, valor)

Sirve para meter un dato en el localStorage o sessionStorage. Si la “clave” ya existe, se sobrescribe el valor anterior.

2. Leer datos: .getItem(clave)

Pasamos el nombre de la clave que se busca y devuelve su valor en texto. Si no se encuentra la clave, devuelve null.

3. Borrar un dato específico: .removeItem(clave)

Si ya no se necesita un dato en concreto, se destruye pasándole su clave.

4. Borrar todos los datos: .clear()

El método .clear() elimina absolutamente todo lo que el navegador haya guardado desde un dominio en ese almacenamiento.

5. Saber cuántos datos hay guardados: .length

En realidad es una propiedad, no un método (no lleva paréntesis). Informa cuántas claves se tienen guardadas en un momento dado.

Hay un detalle técnico de SessionStorage que hay que tomar en cuenta: si el usuario refresca la página (F5), los datos NO se borran.

¿Cómo guardamos arrays u objetos si solo se acepta texto?

Si se intenta guardar una variable compuesta (array u objeto) directamente a SessionStorage o LocalStorage, pasará esto:

Se utilizan dos métodos JSON nativos de JavaScript: JSON.stringify() y JSON.parse().

• Para guardar (Serializar): Se utiliza JSON.stringify(array u objeto). Este método transforma mágicamente un objeto o array en una cadena de texto plana.
• Para leer (Des-serializar): Se utiliza JSON.parse(texto). Esto toma el texto plano y lo transforma de vuelta en un array u objeto literal de JavaScript.

Ejemplo:

Ejemplo 1: Session Storage y arrays

Tenemos un array de canciones favoritas:

¿Cómo escribiríamos el código para guardar ese array en el sessionStorage bajo la clave "lista_reproduccion", y luego cómo lo leeríamos de vuelta en una nueva variable para hacerle un console.log() al segundo elemento del array ("Billie Jean")?

Respuesta

Ejemplo 2: Cambiar tema Tailwind CSS (Modo Oscuro/Claro) con LocalStorage

Si un usuario entra a tu web y prefiere leerla con el fondo oscuro, esa es una preferencia personal a largo plazo. Sería extremadamente molesto para el usuario que, cada vez que cierra la pestaña y vuelve a entrar al día siguiente, la web aparezca en blanco brillante y tenga que volver a pulsar el botón de “Modo Oscuro”.

Al usar LocalStorage, el navegador recuerda esa decisión para siempre (o hasta que el usuario decida cambiarla de nuevo), sin importar si apaga el ordenador o cierra el navegador.

Con Tailwind CSS, lo que se hace es añadir o quitar una palabra (una clase llamada dark) en la etiqueta principal <html> de tu página.

Tailwind está diseñado para que, si el elemento <html> tiene la clase dark, automáticamente se activen todos los estilos oscuros que hayas programado (los que empiezan por dark:).

El Script para cambiar el tema desde Tailwind + LocalStorage

Este pequeño script se coloca normalmente en el <head> del HTML. Su trabajo es “mirar” el LocalStorage antes de que la página se pinte, para evitar el destello blanco que ocurre si el modo oscuro se activa tarde.

¿Cómo se programaría el botón de “Cambiar Tema”?

Cuando el usuario hace clic en el botón Cambiar Tema para cambiar el tema, tu código de JavaScript tiene que hacer dos cosas a la vez: cambiar la interfaz y guardar la decisión en el LocalStorage.

Entendiendo el funcionamiento del éste script

En las etiquetas de Tailwind se escriben ambos tipos de comportamientos o clases de la siguiente manera: class="bg-white text-black dark:bg-slate-900 dark:text-white".

La función cambiarTema se encarga de aplicar los estilos dark en cuanto se hace clic en el botón botonTema agregando/quitando la clase dark del elemento HTML y guardando el nuevo tema en el LocalStorage.

El “secreto” de Tailwind está en cómo funciona el CSS por dentro y una cosa llamada selectores descendientes.

Cuando se agregan las siguientes dos clases a un párrafo class="text-blue-800 dark:text-yellow-400", se están dando dos instrucciones visuales distintas a ese mismo párrafo. Tailwind traduce eso a código CSS real que el navegador entiende así:

Estudiemos esta segunda regla de CSS: .dark .dark\:text-yellow-400.

La segunda de las dos clases separadas por un espacio, le dicen al navegador: “Aplica este color amarillo SÓLO si este elemento está dentro de otro elemento que tenga la clase .dark”.

El “Efecto Cascada” del CSS

Si el árbol de HTML es este:

¿Qué hace el navegador cuando va a pintar ese párrafo? Hace un escaneo rápido hacia arriba:

1. Mira el párrafo y ve que tiene la clase dark:text-yellow-400.
   
2. El CSS le dice: “Para pintar esto de amarillo, tienes que estar dentro de un padre llamado .dark”.
   
3. El navegador mira a sus padres (<body>, <html>) y entonces… encuentra que la etiqueta <html> tiene la clase dark.
   
4. En ese instante, el navegador sobrescribe el color azul por defecto y pinta el texto de color amarillo.

Al eliminar la clase dark del <html>, el navegador volverá a escanear, verá que ya no está dentro de un padre .dark, ignorará la regla del amarillo y el párrafo volverá a verse azul instantáneamente.

Con Tailwind, solo se escriben, en los elementos HTML, las dos variantes usando el prefijo dark: (por ejemplo: bg-white dark:bg-black).

JavaScript solo se encarga de encender o apagar el interruptor general (<html class="dark">) basándose en lo que haya leído en el LocalStorage. Tailwind y el navegador hacen todo el resto del trabajo en equipo.