前端 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('');// 设置 Cookieconst handleSetCookie = () => {Cookies.set('username', 'John Doe', { expires: 7 }); // 7天后过期setUsername('John Doe');};// 获取 CookieuseEffect(() => {const savedUsername = Cookies.get('username');if (savedUsername) {setUsername(savedUsername);}}, []);// 删除 Cookieconst 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' });