El objetivo de este artículo es cómo podemos configurar, cerrar la sesión de un usuario y recuperar datos del almacenamiento del navegador de usuario de la memoria local en la aplicación React. Durante la sesión de inicio de sesión, guardaremos los detalles del usuario en el almacenamiento local del navegador, y también durante el cierre de sesión, eliminaremos los detalles del usuario del almacenamiento local.
LocalStorage es un dispositivo de almacenamiento de datos basado en la web para un usuario local, lo que significa que los datos se almacenan en las sesiones del navegador y la base de datos no tiene fecha de vencimiento. A través de este almacenamiento local, realizaremos el cierre de sesión del usuario de la aplicación Reactjs.
Enfoque: Usaremos los siguientes pasos:
- En primer lugar, creamos una aplicación de reacción usando el comando create-react-app.
- Cree 3 campos de entrada y 3 estados para almacenar los datos.
- Cree un nuevo estado isLoggedin y algo de código que escribiremos.
- Crear función de inicio y cierre de sesión.
Creación de la aplicación React:
Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app my-app
Paso 2: después de crear la carpeta de su proyecto (es decir, mi aplicación), muévase a ella usando el siguiente comando.
cd my-app
Paso 3: Ejecute la aplicación usando el siguiente comando.
npm run start
Después de ejecutar estos comandos, verá la interfaz web de reacción predeterminada.
Estructura del proyecto: Se verá así.
directorio de proyectos
Ejemplo: escriba el siguiente código en el archivo App.js. Hemos creado un formulario de 3 campos de entrada y 3 estados. Hemos utilizado el estado isLoggedin ya que mostrará que el usuario inició sesión o no. Hemos creado funciones de inicio y cierre de sesión.
Nombre de archivo: App.js
Javascript
import { useState } from 'react';
import './App.css';
function App() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [isLoggedin, setIsLoggedin] = useState(false);
const login = (e) => {
e.preventDefault();
console.log(name, email, password);
const userData = {
name,
email,
password,
};
localStorage.setItem('token-info', JSON.stringify(userData));
setIsLoggedin(true);
setName('');
setEmail('');
setPassword('');
};
const logout = () => {
localStorage.removeItem('token-info');
setIsLoggedin(false);
};
return (
<>
<div style={{ textAlign: 'center' }}>
<h1>This is React WebApp </h1>
{!isLoggedin ? (
<>
<form action="">
<input
type="text"
onChange={(e) => setName(e.target.value)}
value={name}
placeholder="Name"
/>
<input
type="email"
onChange={(e) => setEmail(e.target.value)}
value={email}
placeholder="Email"
/>
<input
type="password"
onChange={(e) => setPassword(e.target.value)}
value={password}
placeholder="Password"
/>
<button type="submit" onClick={login}>
GO
</button>
</form>
</>
) : (
<>
<h1>User is logged in</h1>
<button onClickCapture={logout}>logout user</button>
</>
)}
</div>
</>
);
}
export default App;
Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.
npm run start
Producción:
