如何在 ReactJS 中设置 Cookie？

在本章中，我们将了解如何在 React 应用程序 中设置、删除和检索 Cookie。

Cookie 是以键值对形式存储的数据，网站使用它来存储用户在其计算机上的信息，并使用它来验证用户。

为了设置或删除 Cookie，我们将使用 react-cookie 的第三方依赖项。

安装模块

npm install react-cookie

或者，

yarn add react-cookie

Npm 是 节点包管理器，它管理我们的 React 包，但 yarn 是更安全、更快、更轻量级的包管理器。

设置 Cookie

在这个示例中，我们将构建一个 React 应用程序，该应用程序从用户那里获取用户名和密码，并将其作为 Cookie 存储在用户的计算机上。

首先，使用 react-cookie 包中的 CookiesProvider 组件包装应用程序的 index.js 或根应用程序组件。

之后，使用它提供的 useCookies 钩子，其语法如下：

语法

const [cookies, setCookie, removeCookie] = useCookies(['cookie-name']);

参数

  • Cookies：包含所有用户 Cookie 的 JavaScript 对象。

  • setCookie：设置 Cookie 的函数。

  • removeCookie：删除 Cookie 的函数。

示例

index.jsx

import React from "react";
import ReactDOM from "react-dom";
import { CookiesProvider } from "react-cookie";
import App from "./App";

ReactDOM.render(
   <CookiesProvider>
      <App />
   </CookiesProvider>,
   document.getElementById('root')
);

App.jsx

import React, { useState } from 'react';
import { useCookies } from 'react-cookie';

const App = () => {
   const [name, setName] = useState('');
   const [pwd, setPwd] = useState('');
   const [cookies, setCookie] = useCookies(['user']);

   const handle = () => {
      setCookie('Name', name, { path: '/' });
      setCookie('Password', pwd, { path: '/' });
   };
   return (
      <div className="App">
      <h1>Name of the user:</h1>
      <input
         placeholder="name"
         value={name}
         onChange={(e) => setName(e.target.value)}
      />
      <h1>Password of the user:</h1>
      <input
         type="password"
         placeholder="name"
         value={pwd}
         onChange={(e) => setPwd(e.target.value)}
      />
      <div>
         <button onClick={handle}>Set Cookie</button>
      </div>
   </div>
   );
};
export default App;

在上面的示例中，当单击“设置 Cookie”按钮时，将执行 handle 函数，该函数将为用户设置 Cookie。path:'/' 表示 Cookie 可用于网站的所有页面。

输出

这将产生以下结果。

检索 Cookie

设置 Cookie 后，我们可以通过编写 cookies.{cookie 键名} 来访问它们。

示例

App.jsx

import React, { useState } from 'react';
import { useCookies } from 'react-cookie';

const App = () => {
   const [name, setName] = useState('');
   const [pwd, setPwd] = useState('');
   const [cookies, setCookie] = useCookies(['user']);

   const handle = () => {
      setCookie('Name', name, { path: '/' });
      setCookie('Password', pwd, { path: '/' });
   };
   return (
      <div className="App">
      <h1>Name of the user:</h1>
      <input
         placeholder="Name"
         value={name}
         onChange={(e) => setName(e.target.value)}
      />
      <h1>Password of the user:</h1>
      <input
         type="password"
         placeholder="Password"
         value={pwd}
         onChange={(e) => setPwd(e.target.value)}
      />
      <div>
      <button onClick={handle}>Set Cookie</button>{' '}
      </div>
      <br />
      {cookies.Name && (
      <div>
         Name: <p>{cookies.Name}</p>
      </div>
      )}
      {cookies.Password && (
      <div>
         Password: <p>{cookies.Password}</p>
      </div>
      )}
      </div>
   );
};
export default App;

在上面的示例中，当设置“设置 Cookie”按钮和 Cookie 后，这些 Cookie 的值将相应显示。

输出

这将产生以下结果。

更新于：2023 年 9 月 10 日

33K+ 浏览量

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告