前端 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' });
相关推荐
李白同学3 小时前
C++:list容器--模拟实现(下篇)
开发语言·数据结构·c++·windows·算法·list
一丢沙3 小时前
Verilog 硬件描述语言自学——重温数电之典型组合逻辑电路
开发语言·算法·fpga开发·verilog
再学一点就睡4 小时前
初探 React Router:为手写路由筑牢基础
前端·react.js
悟空聊架构4 小时前
5 分钟上手!Burp 插件「瞎越」一键批量挖垂直越权
前端
炒毛豆4 小时前
vue3+antd实现华为云OBS文件拖拽上传详解
开发语言·前端·javascript
Pu_Nine_94 小时前
Axios 实例配置指南
前端·笔记·typescript·axios
THMAIL4 小时前
攻克 Java 分布式难题:并发模型优化与分布式事务处理实战指南
java·开发语言·分布式
红尘客栈25 小时前
Shell 编程入门指南:从基础到实战2
前端·chrome
完美世界的一天5 小时前
Golang 面试题「中级」
开发语言·后端·面试·golang
前端大卫6 小时前
Vue 和 React 受控组件的区别!
前端