vue项目关于前端传Cookie总结

旧城等待， 2022-11-26 15:56 37阅读 0赞

**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=/";
        }
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，37人围观）

还没有评论，来说两句吧...

相关阅读

相关【前端vue开发架构】vue开发单页项目架构总结

　　下面介绍当前这个示例项目的使用说明，你可以在自己机器上完成示例项目的安装和运行，查看运行效果。然后我们在了解从这种项目的构建，到具体的开发细节。　　安装　　使

╰半夏微凉°/ 2023年09月25日 11:56/ 0 赞/ 61 阅读

相关 vue项目关于前端传Cookie总结

1.请求传cookie 配置 //直接在拦截器里加 Axios.defaults.withCredentials = true; 2.cookie的写入，读

旧城等待，/ 2022年11月26日 15:56/ 0 赞/ 38 阅读

相关关于 Vue 项目打包部署知识点总结

![cfbab80925c021688a6676b2fbc3d2a9.png][] 使用Vue做前后端分离项目时，通常前端是单独部署，用户访问的也是前端项目地址，因此前端开发

水深无声/ 2022年08月28日 09:49/ 0 赞/ 192 阅读

相关创建vue前端项目

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层

朱雀/ 2022年05月17日 04:59/ 0 赞/ 247 阅读

相关 VUE前端cookie操作

如下是简单cookie操作，当前仅限前端实例要注意的有两点： 1、cookie内容存贮的名称 2、删除cooki

╰半橙微兮°/ 2022年01月25日 15:59/ 0 赞/ 235 阅读

相关前端cookie、localStorage、sessionStorage缓存技术总结

转载自：[https://www.cnblogs.com/belove8013/p/8134067.html][https_www.cnblogs.com_belove8013

r囧r小猫/ 2021年12月20日 16:39/ 0 赞/ 225 阅读

相关前端vue项目-关于下载文件pdf/excel

最近在做一些需求，需要下载一些文件信息，最频繁的就是下载excel文件到本地了看过了很多方法，做个整理吧哈哈哈哈参考的文章链接： [https://www.cnblo

心已赠人/ 2021年12月10日 20:23/ 0 赞/ 479 阅读

相关关于vue，vuex总结

首先，Vue是MVVM，那么，视图需要的数据，都会放在作为Model的data里面。但是，如果在使用中需要记录的数据不需要被监听变化的话，可以在created的时候在thi

深藏阁楼爱情的钟/ 2021年12月01日 13:10/ 0 赞/ 281 阅读

相关关于cookie

1.关于cookie的domain属性的值有没有“.”的测试现有两个应用Ａ,Ｂ, Ａ域名www.zyr.com , Ｂ域名为abc.zyr.

红太狼/ 2021年09月29日 11:32/ 0 赞/ 282 阅读

相关 Vue前端面试总结（十）sessionStorage localStorage cookie 详解

sessionStorage localStorage cookie 的区别 1.生命周期 Cookie：可设置失效时间，默认是关闭浏览器后失效 session

ゝ一世哀愁。/ 2021年07月25日 00:04/ 0 赞/ 398 阅读