前端 cookie 使用

1.轻量库下载

go 复制代码
npm install js-cookie
go 复制代码
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中使用

go 复制代码
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.参数详解

ts 复制代码
Cookies.set(name, value, [options]);
go 复制代码
// 设置 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' });
相关推荐
歪歪1004 小时前
HTML 如何转 Markdown
开发语言·chrome·python·程序人生·html
小坏坏的大世界4 小时前
C++中多线程和互斥锁的基本使用
开发语言·c++
百万蹄蹄向前冲4 小时前
秋天的第一口代码,Trae SOLO开发体验
前端·程序员·trae
努力奋斗14 小时前
VUE-第二季-02
前端·javascript·vue.js
路由侠内网穿透5 小时前
本地部署 SQLite 数据库管理工具 SQLite Browser ( Web ) 并实现外部访问
运维·服务器·开发语言·前端·数据库·sqlite
王者鳜錸5 小时前
PYTHON从入门到实践-18Django模版渲染
开发语言·python·django
一只韩非子5 小时前
程序员太难了!Claude 用不了?两招解决!
前端·claude·cursor
JefferyXZF5 小时前
Next.js项目结构解析:理解 App Router 架构(二)
前端·全栈·next.js
Sane5 小时前
react函数组件怎么模拟类组件生命周期?一个 useEffect 搞定
前端·javascript·react.js
Hard but lovely5 小时前
C++ STL--> vector的模拟实现!
开发语言·c++