如何在 ReactJS 中设置 Cookie？

Cookie 是应用程序的重要组成部分，因为 Cookie 用于以键值形式设置值，该键值形式可以设置在浏览器存储中，并进一步用于识别当前用户。下面的例子展示了如何在 ReactJS 应用程序中设置 cookie，这里我们以用户名作为 key，在 cookie 中设置它的值。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app setcookiedemo

第 2 步：创建项目文件夹（即setcookiedemo）后，使用以下命令移动到该文件夹：

cd setcookiedemo

项目结构：它将如下所示。

项目结构

App.js：现在在App.js文件中写下以下代码。在这里，App 是我们的默认组件，我们在其中编写了代码以使用基本 UI 在 localStorage 中设置 cookie。

Javascript

import React, { useState } from "react";
  
const App = () => {
  
  const [message, setMessage] = useState('')
    
  const setCookieFunction = (value) => {
    
    localStorage.setItem('username', value)
  
    setMessage('Username set as cookie!!')
  }
  
  return (
    
              Setting Cookie in ReactJS
        Enter User Name:  setCookieFunction(e.target.value)}> 

        {message}
      
    
  );
}
  
export default App

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：

如果用户输入设置为 cookie 的用户名，则输出如下：
现在通过检查浏览器页面转到浏览器的localStorage ，在那里您可以看到我们的 cookie 设置为 key='username' 和 value='gouravhammad' ，如下所示：