前端 cookie 使用

1.轻量库下载

npm install js-cookie

2.使用 cookie

import Cookies from 'js-cookie';

// 设置（支持对象/过期时间/路径）
Cookies.set('user', { id: 1, role: 'admin' }, { expires: 7, secure: true });

// 读取（自动解析对象）
const user = Cookies.getJSON('user'); // {id:1, role:'admin'}

// 删除
Cookies.remove('user');

3.react中使用

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

function App() {
  const [username, setUsername] = useState('');

  // 设置 Cookie
  const handleSetCookie = () => {
    Cookies.set('username', 'John Doe', { expires: 7 }); // 7天后过期
    setUsername('John Doe');
  };

  // 获取 Cookie
  useEffect(() => {
    const savedUsername = Cookies.get('username');
    if (savedUsername) {
      setUsername(savedUsername);
    }
  }, []);

  // 删除 Cookie
  const handleDeleteCookie = () => {
    Cookies.remove('username');
    setUsername('');
  };

  return (
    <div>
      <p>当前用户名: {username || '未设置'}</p>
      <button onClick={handleSetCookie}>设置 Cookie</button>
      <button onClick={handleDeleteCookie}>删除 Cookie</button>
    </div>
  );
}

4.参数详解

Cookies.set(name, value, [options]);

// 设置 7 天后过期的 Cookie
Cookies.set('token', 'abc123', { expires: 7, path: '/' });

// 存储 JSON 对象
Cookies.set('user', { id: 1, name: 'Alice' });

// 安全 Cookie（HTTPS + 同源严格限制）
Cookies.set('session', 'xyz', { secure: true, sameSite: 'Strict' });