在客户端和服务端获取、设置和删除cookie的方法

旺旺旺小小苏

于 2023-10-19 15:57:09 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签：前端服务器 javascript

本文链接：https://blog.csdn.net/liusuyun_1/article/details/133923429

本文概述了cookie的基本概念，包括其作用和过期机制。介绍了在客户端使用JavaScript和js-cookie库操作cookie的方法，以及在服务端通过next/headers和nookies插件设置和删除cookie的实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是cookie

二、在客户端获取、设置和删除cookie的方法

三、在服务端设置和删除cookie的方法

最近在开发项目时，会经常遇到在服务端或者客户端跟cookie打交道的需求，于是总结一些其的一些用法。

一、什么是cookie

在了解cookie的一些操作之前，先了解一下什么是cookie?

Cookie是一种在客户端（用户的浏览器）存储数据的机制，以便在用户的多次请求中跟踪和识别用户。它们是由网站创建的，当用户访问该网站时，这些数据会被发送到用户的浏览器，并在那里存储以供将来使用。例如，当你登录一个网站后，网站会创建一个包含你登录信息的Cookie，然后你的浏览器会保存这个Cookie，当你再次访问该网站时，你的浏览器会发送这个Cookie，网站就可以识别你并保持你的登录状态。

cookie的过期时间？

cookie的过期时间可以在创建或者修改cookie时通过expires或者max-age参数定义，如果都不设置则cookie会在浏览器关闭时过期。如果同时设置，那么Max-Age属性将优先被使用。需要注意的是不是所有的浏览器都兼容Max-Age这个属性的。

1）expires为cookie的过期时间，这个日期和时间必须是GMT格式（可通过toUTCString()方法进行转换）

2）max-age为cookie将要过期的最大秒数

二、在客户端获取、设置和删除cookie的方法

获取cookie:

1）document.cookie

2）使用js-cookie插件

import Cookies from 'js-cookie';
Cookies.get('cookieKey')

设置cookie：

1）

document.cookie = '[cookieKey]:[value];expires=xxx'

2）使用js-cookie插件

import Cookies from 'js-cookie';
Cookies.set([cookieKey],[value],options)

删除cookie：

1）max-age=-1 将要过期的最大秒数设置为-1

2）expires 设置为已过期的时间，例如：Thu, 01 Jan 1970 00:00:00 GMT

3）使用js-cookie插件

import Cookies from 'js-cookie';
 Cookies.remove([cookieKey],options)

三、在服务端设置和删除cookie的方法

我在服务端设置cookie一般是使用第三方插件去完成的，例如next/headers、nookies等

import {parseCookies(获取)、setCookie(设置)、destroyCookie(删除)} from 'nookies'

import { cookies } from 'next/headers';
cookies().get() //获取
cookies().set() //设置
cookies().delete()  //删除