如何设置cookie（增添，获取、删除）

Lee_Yu_Fan

已于 2023-12-06 17:55:23 修改

阅读量892

点赞数 9

文章标签： javascript 前端开发语言

于 2023-12-06 17:55:10 首次发布

本文链接：https://blog.csdn.net/m0_73334325/article/details/134837580

版权

本文介绍了如何使用原生JavaScript实现cookie的设置、获取和删除，以及如何通过js-cookie库简化操作。还展示了在Vue或其他前端项目中导入和使用这两个方法的例子。

摘要由CSDN通过智能技术生成

前言：

自用！

代码一：（原生js实现）

//cookie.js文件
// 设置cookie
export function setCookie(key,value){
    let refreshDate = new Date()
    refreshDate.setDate(refreshDate.getDate() + 1) //设置有效期为1天
    document.cookie = `${key} = ${value};expires = ${refreshDate.toGMTString()}`
}
//获取cookie
export function getCookie(name){
    let str = document.cookie;
    let arr = str.split(';')
    //遍历数组（查找以name=开头的元素）
    str = arr.filter(item=>item.startsWith(name + '='))[0]
    return str == undefined ? undefined : str.split('=')[1]
}
//删除cookie
export function removeCookie(name){
    // alert(name)
    //将时间设定为过去的时间可以达到删除cookie的效果
    let data = new Date()
    data.setDate(data.getTime() - 1000)
    document.cookie = `${name} = ;expires= ${data.toGMTString()}`
}


//---------在组件中使用--------------
//1、导入
import {setCookie,getCookie,removeCookie} from './cookie.js'

//2、使用
//2.1 添加token值到cookie中
setCookie('token', token)

//2.2 获取cookie
getCookie('token')

//2.3 删除
removeCookie('token')

代码二：使用 js-cookie

1、下载js-cookie

npm install --save js-cookie

2、在需要处理cookie的地方，通过import引入

import Cookie from  'js-cookie'

3、使用

//----------增加-----------
// 创建一个名称为name，对应值为value的cookie，由于没有设置失效时间，默认失效时间为该网站关闭时
Cookies.set(name, value)
// 创建一个有效时间为7天的cookie
Cookies.set(name, value, { expires: 7 })

//----------获取-----------
// 获取指定名称的cookie
Cookies.get(name)


//----------删除-----------
// 删除指定名称的cookie
Cookies.remove(name)