在前端开发中，使用 cookies 来存储和获取客户端数据是一种常见的技术手段。而 react-cookies 是一个使用方便的 React 客户端 cookies 库，可以方便地进行 cookies 的存取操作。本文介绍如何使用 react-cookies，包括安装、引入、存储和获取 cookies 等方面，并配有示例代码。
安装 react-cookies
在使用 react-cookies 前，我们需要先将其安装到本地项目中。可以使用 npm 在命令行中执行以下代码进行安装：
npm install react-cookies
之后，react-cookies 便已被安装到项目中。
引入 react-cookies
在代码中引入 react-cookies，可以使用以下代码：
import Cookies from 'react-cookies';
以上代码将从 react-cookies 中导入 Cookies 类，方便在代码中使用。
存储和获取 cookies
在使用 Cookies 类存储和获取 cookies 前，我们需要先了解三个相关的 API：set、get 和 remove。set 方法用于存储一个 cookie，get 方法用于获取一个 cookie 的值，remove 方法用于删除一个 cookie。
存储 cookie
使用 set 方法存储一个 cookie 的代码如下：
Cookies.set('key', 'value', { path: '/' });其中，第一个参数是 cookie 的 key，第二个参数是 cookie 的值。第三个参数是可选的 cookie 选项，可以设置 cookie 的路径、过期时间等。
获取 cookie
使用 get 方法获取一个 cookie 的代码如下：
const value = Cookies.get('key');其中，参数是要获取的 cookie 的 key。返回值是获取到的 cookie 的值，如果该 cookie 不存在，则返回 undefined。
删除 cookie
使用 remove 方法删除一个 cookie 的代码如下：
Cookies.remove('key', { path: '/' });其中，参数是要删除的 cookie 的 key。options 是可选的 cookie 选项，可以设置 cookie 的路径等。如果 options 中没设置路径，则使用 set 方法时设置的路径进行删除。
完整示例代码
下面是一个完整的示例代码，展示了如何使用 react-cookies 存储、获取和删除 cookie：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ----------------
----- ---------- ------- --------------- -
-------------------- - -- -- -
----------------------- ---------- - ----- --- ---
-
-------------------- - -- -- -
----- -------- - ------------------------
----------------
-
----------------------- - -- -- -
-------------------------- - ----- --- ---
-
-------- -
------ -
-----
------- ------------------------------------
--- ------
---------
------- ------------------------------------
--- ------
---------
------- ---------------------------------------
------ ------
---------
------
--
-
-
------ ------- -----------在上面的代码中，我们通过三个按钮分别演示了如何存储、获取和删除 cookie。
总结
本文介绍了如何使用 react-cookies 进行客户端 cookies 的存储和获取操作。首先我们需要安装和引入 react-cookies，接着使用 set、get 和 remove 方法来进行操作。希望本文可以对大家使用 react-cookies 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac97b5cbfe1ea0610a87