如何使用 reactjs 在 cookie 中保存多个用户数据？答案

【问题标题】：How to save multiple users data in the cookies using reactjs?如何使用 reactjs 在 cookie 中保存多个用户数据？
【发布时间】：2021-08-08 08:09:58
【问题描述】：

你好！

我有一页有一个表格，

此表单有一个提交按钮和两个输入：一个用于用户名，另一个用于密码

每次按下按钮后，我都想在 Cookies 中保存用户名和密码我希望 cookie 记住以前的用户数据（用户名、密码）

例如，cookie 应该有这样的数据：

第一个用户{用户名：“用户”，密码：“密码”} 2最终用户{用户名：“user2”，密码：“pw2”}

继续添加

我试试 useCookies 钩子

const [cookies, setCookie] = useCookies([]);

当我按下按钮时，这段代码被执行：

  setCookie('username', username, { path: '/' });
  setCookie('password', pw, { path: '/' });

但每次按下后，先前的用户数据都会从 cookie 中删除，并且 cookie 仅包含最后的用户数据

如果您知道如何让 cookie 保存所有用户数据，请告诉我。谢谢你的时间????

【问题讨论】：

标签： javascript reactjs cookies react-hooks

【解决方案1】：

您可以做的是在 useCookie 钩子的依赖数组中设置您将使用的 cookie：

const [cookies, setCookies] = useCookies(["username", "password"]);

然后你可以在每次提交新用户时读取cookie并将其添加到数组中，并将结果存储在cookie中：

const setUserCookie = (username) => {
  const previousUsers = cookies["username"] || [];
  const newUsers = [...previousUsers, username];
    
  setCookies("username", newUsers, { path: "/" }); // ['user1', 'user2']
};

为了更轻松地处理数据，您可以将用户名和密码放在一个对象中，并将这些记录存储在一个 cookie 中：

const userToAdd = { name: username, password: pw };
const previousUsers = cookies["users"] || [];
const newUsers = [...previousUsers, userToAdd];

setCookies("users", newUsers, { path: "/" }); // { name: 'user1', password: 'foo' }

【讨论】：