ReactJS应用中的Cookies 🍪

当我们谈论持久化我们的应用程序的数据时，大多数开发人员混淆了他们在cookie和本地存储之间的选择。好吧，他们两个都有不同的目的，并且有不同的方式。我们将讨论这两种方法，但在这一节中，我们将重点关注并实现cookies。

什么是曲奇？

嗯，我个人喜欢巧克力片的。 无论如何，在这个新时代，cookies对网站是必不可少的，它们使你的个人体验更好。它可能是通过

• 记住你这个用户，这样你就不必每次都介绍自己。
• 显示你作为一个用户想看到的东西
• 追踪你的偏好和更多

但它们也可能给搭上漏洞或暴露你的数据。当你访问一个网站时，可能有两种类型的cookie，它们可以是第一 方或第三方。 第一方cookie是来自你正在使用的网站的cookie，而第三方cookie不是来自你正在浏览的网页，它们可能是来自广告或其他一些试图获得你的一些数据的方。

ReactJS中的cookies？

你可以在你的reactJS网络应用中拥有第一方cookie，让我们看看它们的作用：

npm i react-cookie

一旦你安装了这个包，我们将开始用react-cookie协助的cookie提供者来包装我们的整个应用

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <CookiesProvider>
      <AnyOtherProvider>
        <App />
      </AnyOtherProvider>
    </CookiesProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

一旦你配置了你的提供者，现在是时候看看你组件内的真正行动了：

import { useCookies } from "react-cookie";

function CustomComponent() {
  const [cookies, setCookie, removeCookie] = useCookies(["user"]);

  const onSubmit = (data) => {
    setCookie("user", data, { path: "/" });
  };

  return (
  ... rest of your component
      <button
        onClick={() => {
          alert(`User cookie is ${JSON.stringify(cookies["user"])}`);
        }}
      >
        Show user cookie
      </button>
      <button
        onClick={() => {
          removeCookie("user");
        }}
      >
        Delete user cookie
      </button>
  )
}

在这里，我们使用react-cookie的useCookies钩子，它可以帮助我们干净地设置和获取我们的cookie，所以我基本上把这个功能整合到我们现有的一个表单教程中，增加了两个按钮，提醒当前的cookie，另一个是删除cookie。

真相时刻

总结

我们已经谈到了你可以在你的react应用中利用cookies的不同方式。无论是会话管理、个性化、跟踪，还是认证。我们还学习了在你的reactjs应用中开始使用cookie的最简单方法。这节课就到此为止，下节课见。 请注意。