React 中的会话存储

Rana Hasnain Khan 2022年5月18日

React React Session

我们将介绍如何在 session 中存储数据并在 React 中显示该数据。

React 中的会话存储

在构建具有多个用户和用户角色的应用程序时，我们需要使用会话并存储一些重要数据来执行基于用户或用户角色的查询。在会话中存储数据与在局部变量中存储数据相同。

让我们举一个例子，我们将使用 useState 在按钮单击时存储用户的用户名。首先，我们将在 App.js 中导入 useState。

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

接下来，我们将使用 useState 定义常量 name 和 setName。

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

现在，让我们在 React 中创建一个表单，它将要求输入用户名和一个提交按钮。

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

正如你在上面的代码中注意到的那样，提交表单时将调用函数 SessionDataStorage。此函数将在会话中存储数据。所以，让我们现在创建该函数。

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

所以我们的应用程序现在完成了；让我们检查一下它在前端的外观以及它是如何工作的。

输出：

React 中的会话存储

我们成功地将数据存储在会话中。关闭浏览器后，会话中的数据将被删除。

Author: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.