Session-Speicher in React

Wir werden vorstellen, wie man Daten in session speichert und diese Daten in React anzeigt.

Sitzungsspeicherung in React

Beim Erstellen einer Anwendung mit mehreren Benutzern und Benutzerrollen müssen wir Sitzungen verwenden und einige wichtige Daten speichern, um Abfragen basierend auf Benutzern oder Benutzerrollen durchzuführen. Das Speichern von Daten in einer Sitzung entspricht dem Speichern von Daten in einer lokalen Variablen.

Lassen Sie uns ein Beispiel haben, in dem wir den Benutzernamen eines Benutzers bei einem Klick auf eine Schaltfläche mit useState speichern. Zuerst importieren wir useState in App.js.

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

Als nächstes definieren wir die Konstanten name und setName mit useState.

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

Lassen Sie uns nun ein Formular in React erstellen, das nach der Eingabe des Benutzernamens und einer Schaltfläche zum Senden fragt.

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

Wie Sie im obigen Code sehen, wird beim Absenden des Formulars eine Funktion SessionDataStorage aufgerufen. Diese Funktion speichert Daten in der Sitzung. Lassen Sie uns diese Funktion jetzt erstellen.

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

Unsere App ist also jetzt fertig; Lassen Sie uns überprüfen, wie es auf dem Frontend aussieht und wie es funktioniert.

Ausgabe:

Wir haben erfolgreich Daten in der Sitzung gespeichert. Sobald der Browser geschlossen wird, werden die Daten der Sitzung gelöscht.