vue项目关于前端传Cookie总结_带有cookie 的前端vue 项目-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35371821/article/details/107958019

本文详细介绍了如何使用JavaScript进行Cookie的操作，包括设置、读取和删除Cookie。重点讲解了在多文件夹项目中设置Cookie路径的重要性，以及通过置空值来清除Cookie的方法。

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

1.请求传cookie 配置

//直接在拦截器里加
Axios.defaults.withCredentials = true;

2.cookie的写入，读取，清除

注意：
cookie写入需要注意 当项目有多个文件夹时我们需要设置path
cookie清除一般是设置过期或者置空，我这里用的是置空

/**
 * 添加cookie
 * @param {String} objName
 * @param {String} objValue
 * @param {Number} objHours
 */
export function addCookie(objName, objValue, objHours = 24) {
  if (objHours > 0) { // 如果不设定过期时间, 浏览器关闭时cookie会自动消失
    var date = new Date()
    var ms = objHours * 3600 * 1000;

    date.setTime(date.getTime() + ms);
    document.cookie = objName + "=" + objValue + "; expires=" + date.toGMTString() + "; path=/;"; // 指定了cookie的path
  }
}

/**
 * 获取Cookie中的值
 * @param objName
 */
export function getCookie(objName) {
  let arrStr = document.cookie.split("; ");
  for (let i = 0; i < arrStr.length; i++) {
    let temp = arrStr[i].split("=");
    if (temp[0] == objName) {
      return temp[1]
    }
  }
}

/**
 * 清除cookie
 */
export function clearAllCookie() {
  // eslint-disable-next-line no-useless-escape
  let keys = document.cookie.match(/[^ =;]+(?=\=)/g);
  if (keys) {
    for (let i = keys.length; i--;) {
      document.cookie = keys[i] + '=' + "; path=/";
    }
  }
}