Almacenamiento de sesiones en React

Presentaremos cómo almacenar datos en sesión y mostrar esos datos en React.

Almacenamiento de sesiones en React

Al crear una aplicación con múltiples usuarios y funciones de usuario, necesitamos usar sesiones y almacenar algunos datos importantes para realizar consultas basadas en usuarios o funciones de usuario. Almacenar datos en una sesión es lo mismo que almacenar datos en una variable local.

Veamos un ejemplo en el que almacenaremos el nombre de usuario de un usuario al hacer clic en un botón usando useState. Primero, importaremos useState en App.js.

# react
import React, { useState } from "react";

A continuación, definiremos las constantes name y setName usando useState.

# react
const [name, setName] = useState("");

Ahora, creemos un formulario en React, que solicitará la entrada del nombre del usuario y un botón de envío.

# react
<div className="App">
      <h3>Session Storage in React</h3>
      <form onSubmit={SessionDataStorage}>
        <input
          type="text"
          placeholder="Enter your name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />

        <button type="submit">submit</button>
      </form>
    </div>

Como notó en el código anterior, se llamará a una función SessionDataStorage cuando se envíe el formulario. Esta función almacenará datos en la sesión. Entonces, vamos a crear esa función ahora.

# react
const SessionDataStorage = (e) => {
    e.preventDefault();
    sessionStorage.setItem("name", name);
    console.log(name);
  };

Así que nuestra aplicación ya está completa; veamos cómo se ve en la interfaz y cómo funciona.

Producción:

Almacenamos con éxito los datos en la sesión. Una vez que se cierra el navegador, se eliminan los datos de la sesión.