什么是 Cookie？
在 Web 应用中，Cookie 是一种存储在用户本地计算机上的数据，它被服务器发送到浏览器，以便在之后的请求中使用。它可以用于存储用户的登录信息、购物车数据等。
Cookie 通常包括名称、值、过期时间、路径等信息。可以使用 JavaScript 中的 document.cookie 属性访问和修改 Cookie。
Next.js 中的 Cookie
在 Next.js 中，我们可以使用第三方库 js-cookie 来处理 Cookie。
安装 js-cookie：
--- ------- ---------
然后，在需要使用的组件中引入 js-cookie：
------ ------- ---- ------------
设置 Cookie
要设置 Cookie，可以使用 Cookies.set() 方法，如下所示：
------------------- ---------
要在 n 秒后过期，可以增加 expires 选项：
------------------- -------- - -------- - ---
还可以设置如下选项：
path：指定路径，默认为当前路径domain：指定 Cookie 可以被发送到哪些域名，默认为当前域名secure：如果为 true，只有通过 HTTPS 连接才可以发送该 CookieSameSite：可以是 'Strict'、'Lax' 或 'None'，用于防止跨站点请求伪造攻击
------------------- -------- - -------- -- ----- ---- ------- -------------- ------- ----- --------- --------- ---
获取 Cookie
要获取 Cookie，可以使用 Cookies.get() 方法：
-------------------- -- -- ------ ---------- ---------
删除 Cookie
要删除 Cookie，可以使用 Cookies.remove() 方法：
-----------------------
删除 Cookie 时，也要指定选项，以确保删除正确的 Cookie。例如：
---------------------- - ----- --- ---
示例代码
以下是设置、获取和删除 Cookie 的示例代码：
------ ----- ---- --------
------ ------- ---- ------------
----- ---------- - -- -- -
----- --------------- - -- -- -
------------------- -------- - -------- -- ----- ---- --------- -------- ---
--
----- --------------- - -- -- -
----- ---- - --------------------
------------------
--
----- ------------------ - -- -- -
---------------------- - ----- --- ---
--
------ -
-----
------- ----------------------------- ---------------
------- ----------------------------- ---------------
------- ----------------------------------- ---------------
------
--
--
------ ------- -----------总结
在 Next.js 应用中，使用 js-cookie 库可以很方便地处理 Cookie。我们可以使用 Cookies.set() 方法设置 Cookie，使用 Cookies.get() 方法获取 Cookie，使用 Cookies.remove() 方法删除 Cookie。
同时，我们也要注意选项的设置，以确保 Cookie 能够正常工作，并且防止跨站点攻击。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6653f405d3423812e488307b