react 如何操作cookie
操作 Cookie 的方法
在 React 中操作 Cookie 可以通过原生 JavaScript 的 document.cookie 或第三方库（如 js-cookie）实现。以下是具体方法：
原生 JavaScript 方法
使用 document.cookie 直接读写 Cookie：
// 设置 Cookie
document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
// 读取 Cookie
const cookies = document.cookie.split(';').reduce((acc, cookie) => {
const [name, value] = cookie.trim().split('=');
acc[name] = value;
return acc;
}, {});
console.log(cookies.username); // 输出 "JohnDoe"
// 删除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";使用 js-cookie 库
安装 js-cookie 库：
npm install js-cookie在组件中使用：
import Cookies from 'js-cookie';
// 设置 Cookie
Cookies.set('username', 'JohnDoe', { expires: 7, path: '/' });
// 读取 Cookie
const username = Cookies.get('username');
console.log(username); // 输出 "JohnDoe"
// 删除 Cookie
Cookies.remove('username', { path: '/' });注意事项
- 安全性：避免存储敏感信息，考虑使用
HttpOnly和Secure标志增强安全性。 - 路径和域名：明确指定
path和domain以确保 Cookie 在正确的作用域生效。 - 过期时间：设置合理的
expires或max-age控制 Cookie 生命周期。
服务端渲染（SSR）场景
在 Next.js 等框架中，需区分客户端和服务端环境：
if (typeof window !== 'undefined') {
// 客户端操作 Cookie
Cookies.set('token', '12345');
}通过以上方法，可以灵活地在 React 中管理 Cookie。
