当前位置：首页 > React

react 如何操作cookie

2026-01-14 09:31:40React

安装依赖

在React项目中操作cookie通常需要第三方库的支持，推荐使用js-cookie。通过npm或yarn安装：

npm install js-cookie
# 或
yarn add js-cookie

设置Cookie

使用js-cookie设置cookie非常简单。引入库后调用set方法：

react 如何操作cookie

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值：

react 如何操作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: '/' });
}