当前位置：首页 > React

react 如何操作cookie

2026-03-30 18:30:56React

操作 Cookie 的方法

在 React 中操作 Cookie 可以通过原生 JavaScript 的 document.cookie API 或第三方库（如 js-cookie）来实现。以下是两种方法的详细说明：

使用原生 JavaScript 操作 Cookie

原生 JavaScript 提供了 document.cookie 来读取和设置 Cookie，但需要手动处理字符串格式。

设置 Cookie

document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

username=JohnDoe 是键值对。
expires 设置过期时间（UTC 格式）。
path=/ 指定 Cookie 的作用路径。

读取 Cookie

const cookies = document.cookie.split(';').reduce((acc, cookie) => {
  const [key, value] = cookie.trim().split('=');
  acc[key] = value;
  return acc;
}, {});
console.log(cookies.username); // 输出 "JohnDoe"

删除 Cookie 通过设置过期时间为过去的时间来删除 Cookie：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

使用 `js-cookie` 库操作 Cookie

js-cookie 是一个轻量级库，简化了 Cookie 的操作。

react 如何操作cookie

安装

npm install js-cookie

设置 Cookie

import Cookies from 'js-cookie';

Cookies.set('username', 'JohnDoe', { expires: 7, path: '/' }); // 7 天后过期

读取 Cookie

react 如何操作cookie

const username = Cookies.get('username');
console.log(username); // 输出 "JohnDoe"

删除 Cookie

Cookies.remove('username', { path: '/' });

在 React 组件中使用 Cookie

结合 React 的生命周期或 Hooks 管理 Cookie：

函数组件示例

import React, { useEffect } from 'react';
import Cookies from 'js-cookie';

const UserProfile = () => {
  useEffect(() => {
    Cookies.set('lastVisited', new Date().toISOString(), { expires: 1 });
  }, []);

  return <div>Last visited: {Cookies.get('lastVisited')}</div>;
};

export default UserProfile;

类组件示例

import React from 'react';
import Cookies from 'js-cookie';

class UserProfile extends React.Component {
  componentDidMount() {
    Cookies.set('lastVisited', new Date().toISOString(), { expires: 1 });
  }

  render() {
    return <div>Last visited: {Cookies.get('lastVisited')}</div>;
  }
}

export default UserProfile;