Almacenamiento en localStorage en React

En este breve tutorial, veremos cómo almacenar datos de usuario directamente en la memoria caché del navegador usando el objeto localStorage en React.

Introducción

Al desarrollar aplicaciones ligeras, es posible que queramos almacenar algunos datos. Si una base de datos es excesiva, hay una gran alternativa: localStorage.

Si bien no reemplaza una base de datos con fines de base de datos, sirve como un sistema de almacenamiento simple basado en archivos que puede aprovechar para almacenar puntos de datos de fácil acceso.

En este artículo, aprenderemos a usar localStorage para almacenar fácilmente datos en nuestro navegador. Estos datos se guardan como pares clave-valor que el usuario puede recuperar fácilmente.

Guardar datos en localStorage en React es muy fácil:

1
2
3
4
5
const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

Si no tienes prisa y quieres saber más sobre cómo funciona, ¡sigue leyendo!

¿Qué es almacenamiento local?

localStorage es un objeto de almacenamiento web que permite a los desarrolladores almacenar pares clave-valor en un navegador web y garantiza que estos datos sobrevivan a todas las actualizaciones de la página, incluso cuando un usuario cierra o reinicia un navegador, y no tiene fecha de caducidad. Los pares clave-valor almacenados pueden incluir cualquier tipo de datos: matrices, objetos, cadenas, números y muchos otros.

Sin embargo, esto no puede reemplazar el rol de las bases de datos en sus sitios web y aplicaciones web porque los datos se pierden cuando un usuario borra el caché del navegador y el almacenamiento local; en última instancia, es almacenamiento local y debe usarse como tal. No obstante, hay situaciones en las que un usuario puede usar localStorage, como implementar la función modo oscuro, conservar el valor de entrada del formulario del usuario y muchas otras.

localStorage tiene métodos integrados que nos permiten acceder al objeto de almacenamiento del navegador. Un ejemplo es el método setItem(), que nos permite agregar una clave y un valor a localStorage, lo que nos permite almacenar datos. Se utilizan otros métodos para recuperar datos - getItem(), eliminar datos - removeItem(), borrar todas las instancias de localStorage - clear(), etc.

Almacenamiento de datos en almacenamiento local con el método setItem() {#almacenamiento de datos en almacenamiento local con el método setItem}

El método setItem() nos permite guardar valores de cualquier tipo de datos en localStorage mediante la asignación de valores a las claves, lo que da como resultado un par clave-valor. Esta clave se usaría para recuperar el valor correspondiente siempre que queramos recuperarlo de localStorage.

{.icon aria-hidden=“true”}

Nota: Para almacenar datos en localStorage, primero debemos convertirlos a cadena JSON usando la función JSON.stringify(). Y cuando queramos recuperarlo, analizaremos los datos usando JSON.parse(), convirtiendo la cadena JSON nuevamente en un objeto JSON.

Cuando trabajamos con datos en React, con frecuencia usamos ganchos para ayudarnos a almacenarlos/retenerlos. Los ganchos también pueden ayudarnos a encontrar dónde cargar esos datos. Esto también se aplica a localStorage porque usaremos los ganchos useState() y useEffect(). Estos ganchos son críticos porque el gancho useState() se usa para almacenar y establecer datos, mientras que el gancho useEffect() se activa de forma predeterminada después del primer procesamiento y cada vez que el estado pasa cuando cambia el segundo parámetro.

Después de explicar la base, aquí está el código que usaríamos para almacenar datos en localStorage:

1
2
3
4
5
const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

Primero creamos un estado para contener los datos que queremos almacenar en nuestro localStorage, y luego creamos un gancho useEffect(), pasando el estado como el segundo parámetro. De esa forma, cada vez que cambia el estado, los datos en localStorage se actualizan al valor actual.

Manejamos la funcionalidad principal, que se utiliza para ayudarnos en el almacenamiento de datos, dentro del enlace useEffect():

1
localStorage.setItem('dataKey', JSON.stringify(data));

Conclusión

En este artículo, aprendimos a usar ganchos de React para almacenar datos en React usando localStorage. Como se indicó anteriormente, esto nunca reemplazará la función de una base de datos, sino que nos ayudará a almacenar algunos datos relacionados con el usuario que pueden mejorar la interfaz de usuario, pero que no deben persistir independientemente del navegador.