react 如何操作cookie
安装依赖
在React项目中操作cookie通常需要第三方库的支持，推荐使用js-cookie。通过npm或yarn安装：
npm install js-cookie
# 或
yarn add js-cookie设置Cookie
使用js-cookie设置cookie非常简单。引入库后调用set方法：
import Cookies from 'js-cookie';
// 设置普通cookie
Cookies.set('key', 'value');
// 设置带过期时间的cookie（7天后过期）
Cookies.set('key', 'value', { expires: 7 });
// 设置路径等属性
Cookies.set('key', 'value', { expires: 7, path: '/' });读取Cookie
通过get方法读取已存储的cookie值：
const value = Cookies.get('key'); // 返回'value'
const allCookies = Cookies.get(); // 返回所有cookie对象删除Cookie
使用remove方法删除指定cookie：
Cookies.remove('key');
// 需要指定路径时
Cookies.remove('key', { path: '/' });注意事项
- 安全性：避免存储敏感信息（如密码、token）在cookie中。必要时使用
HttpOnly和Secure标志（需后端配合）。 - 同源策略：cookie受同源策略限制，无法跨域访问。
- SSR兼容：在服务端渲染（如Next.js）中，需判断运行环境（
typeof window !== 'undefined'）再操作。
替代方案
若需更复杂操作（如签名、加密），可结合后端API或使用universal-cookie等库：
import { CookiesProvider, useCookies } from 'react-cookie';
function App() {
const [cookies, setCookie] = useCookies(['key']);
setCookie('key', 'value', { path: '/' });
}
