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.