Stockage de session dans React

Nous présenterons comment stocker des données en session et afficher ces données dans React.

Stockage de session dans React

Lors de la création d’une application avec plusieurs utilisateurs et rôles d’utilisateur, nous devons utiliser des sessions et stocker certaines données importantes pour effectuer des requêtes basées sur des utilisateurs ou des rôles d’utilisateur. Stocker des données dans une session revient à stocker des données dans une variable locale.

Prenons un exemple dans lequel nous allons stocker le nom d’utilisateur d’un utilisateur sur un clic de bouton en utilisant useState. Dans un premier temps, nous allons importer useState dans App.js.

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

Ensuite, nous définirons les constantes name et setName à l’aide de useState.

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

Maintenant, créons un formulaire dans React, qui demandera la saisie du nom de l’utilisateur et un bouton de soumission.

# 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>

Comme vous le remarquez dans le code ci-dessus, une fonction SessionDataStorage sera appelée lors de la soumission du formulaire. Cette fonction stockera les données dans la session. Alors, créons cette fonction maintenant.

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

Notre application est donc terminée ; Voyons à quoi cela ressemble sur le frontend et comment cela fonctionne.

Production :

Nous avons réussi à stocker des données dans la session. Une fois le navigateur fermé, les données de la session sont supprimées.