如何在 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+ 瀏覽量

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告