Lectura y escritura de localStorage en React

localStorage es un almacén integrado del navegador con cuatro métodos principales: setItem(key, value), getItem(key), removeItem(key) y clear(). Los datos persisten al recargar la página y reiniciar el navegador.

Vive en el objeto window y está limitado por origen, lo que significa que cada dominio tiene su propio almacenamiento aislado.

Cada llamada a localStorage se ejecuta de forma síncrona en el hilo principal. Leer o escribir grandes cantidades de datos puede bloquear el renderizado y hacer que la interfaz se perciba entrecortada.

Por eso, mantenga pequeños los valores almacenados y evite escribir en cada pulsación de tecla o evento de desplazamiento.

localStorage solo puede contener cadenas. Para almacenar un objeto o un array, primero debe serializarlo con JSON.stringify(value) antes de llamar a setItem.

Si almacena directamente un valor que no sea una cadena, se convierte implícitamente, por lo que un objeto se convierte en la cadena inútil [object Object].

Al leer, llame a JSON.parse(localStorage.getItem(key)), pero el análisis puede lanzar una excepción si la cadena almacenada está dañada o fue escrita por otra fuente.

Envuelva el análisis en un try/catch y use un valor predeterminado como alternativa para que una entrada incorrecta no bloquee el componente.

localStorage no siempre se puede usar: durante el renderizado del lado del servidor, window no existe, y algunos modos de navegación privada lanzan una excepción al escribir. Proteja el acceso con una comprobación de funcionalidad.

Una prueba segura consiste en un try/catch que establezca y elimine una clave ficticia, y devuelva false si se produce una excepción.

La mayoría de los navegadores limitan localStorage a aproximadamente cinco megabytes por origen. Superar este límite provoca un QuotaExceededError al escribir.

Esto hace que localStorage sea adecuado para datos pequeños, pero una mala opción para imágenes, conjuntos de datos grandes o respuestas de API almacenadas en caché.

Son buenos candidatos las partes pequeñas y no sensibles de la interfaz y del estado del usuario: la preferencia de tema, el estado contraído de la barra lateral, los últimos filtros utilizados, los banners descartados y los borradores de formularios sin guardar.

Son valores que desea conservar tras recargar, pero que no necesitan un viaje de ida y vuelta al servidor.

Evite almacenar secretos como tokens o contraseñas, porque cualquier script de la página puede leer localStorage, lo que lo hace vulnerable a XSS. Evite también los objetos grandes y el estado autoritativo del servidor.

Los datos de autenticación sensibles pertenecen a cookies httpOnly, y los datos canónicos deben estar en el servidor.

Ambos comparten la misma API, pero sessionStorage se borra cuando se cierra la pestaña y no se comparte entre pestañas. localStorage persiste indefinidamente y se comparte entre todas las pestañas del mismo origen.

Elija sessionStorage para datos específicos de una pestaña y de corta duración, y localStorage para preferencias duraderas.

Las cookies son pequeñas y se envían con cada solicitud HTTP, lo que resulta adecuado para la autenticación, pero desperdicia ancho de banda cuando se usan para datos generales. IndexedDB es una base de datos asíncrona para datos grandes y estructurados, muy por encima del límite de 5 MB.

Elija cookies para datos de autenticación que deba leer el servidor, localStorage para pequeñas preferencias del cliente e IndexedDB para datos grandes o complejos.

Una utilidad auxiliar mínima escribe con localStorage.setItem(key, JSON.stringify(value)) y lee mediante un try/catch protegido alrededor de JSON.parse(localStorage.getItem(key)), devolviendo un valor predeterminado si se produce un error.

Este pequeño envoltorio mantiene la serialización y el control de errores en un solo lugar.

Compruebe su comprensión de los tipos de datos de localStorage.

Ha aprendido la API de localStorage, que es síncrona, solo admite cadenas y está limitada a cerca de 5 MB, además de cómo analizar datos de forma segura y comprobar su disponibilidad para SSR y el modo privado.

También la comparó con sessionStorage, las cookies e IndexedDB para elegir el almacén adecuado.