Implementar local.storage en React para permitir almacenar variables en memoria

Tiempo de lectura: 2 minutos

Para poder almacenar variables en local, tenemos que implementar local storage, al igual que en web, podemos utilizarlo en React.

Vamos a empezar:

Paso 1: Importar los Módulos Necesarios

Asegúrate de tener instalados los módulos necesarios. Puedes instalar react y react-dom si aún no lo has hecho:

npm install react react-dom

Paso 2: Crear un Componente de Contador

Vamos a suponer que ya tienes un componente de contador. Aquí está el código del componente:

// Counter.js
import React, { useState, useEffect } from 'react';

const Counter = () => {
  // Estado del contador
  const [count, setCount] = useState(() => {
    const storedCount = localStorage.getItem('counter');
    return storedCount ? parseInt(storedCount, 10) : 0;
  });

  // Actualiza localStorage cada vez que el contador cambia
  useEffect(() => {
    localStorage.setItem('counter', count.toString());
  }, [count]);

  // Maneja la función de incremento del contador
  const increment = () => {
    setCount(count + 1);
  };

  // Maneja la función de reinicio del contador
  const reset = () => {
    setCount(0);
  };

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={increment}>Incrementar</button>
      <button onClick={reset}>Reiniciar</button>
    </div>
  );
};

export default Counter;

Paso 3: Utilizar el Componente en tu Aplicación

En el componente principal de tu aplicación (por ejemplo, App.js), importa y utiliza el componente de contador:

// App.js
import React from 'react';
import Counter from './Counter';

const App = () => {
  return (
    <div>
      <h1>Mi Aplicación React</h1>
      <Counter />
    </div>
  );
};

export default App;

Paso 4: Ejecutar tu Aplicación

Asegúrate de haber guardado todos tus archivos y ejecuta tu aplicación React:

npm start

Esto iniciará tu aplicación y podrás ver el contador en la interfaz de usuario.

Paso 5: Entender la Implementación

• useState: Se utiliza para manejar el estado del contador.
• useEffect: Se utiliza para actualizar localStorage cada vez que el valor del contador cambia.
• localStorage: Almacena y recupera el valor del contador del almacenamiento local del navegador.
• Incrementar y Reiniciar: Dos funciones simples que actualizan el estado del contador.

Paso 6: Probar la Persistencia

Prueba la persistencia del contador: incrementa el contador, recarga la página y verifica que el valor del contador se mantiene.

¡Eso es todo! Has implementado con éxito la persistencia del estado del contador utilizando localStorage en tu aplicación React existente. Este ejemplo te proporciona una base para comprender cómo integrar localStorage en otros componentes o funcionalidades de tu aplicación.