VUE框架中同意使用cookie弹框,第一次进入网站展示,点击同意后不再显示

2023-11-09

需求:

全幅横栏,点击确认后隐藏

文案:我们想使用cookie以便更好了解您对本网站的使用情况。这将有助于改善您今后访问本网站的体验。关于cookie的使用,以及如何撤回或管理您的同意,请详见我们的隐私政策。如您点击右侧确认按钮,将视为您同意cookie的使用。

---------------------------------------------------------------------------------------------------------------------------------

html部分和css部分

<!-- cookie声明 -->
      <div class="cookieDiv" v-if="cookieDivOr">
        <span>我们想使用cookie以便更好了解您对本网站的使用情况。这将有助于改善您今后访问本网站的体验。关于cookie的使用,以及如何撤回或管理您的同意,请详见我们的<a href="##">隐私政策</a>。如您点击右侧确认按钮,将视为您同意cookie的使用。</span>
        <div class="aDiv">
          <a href="##" style="margin-left:2.16em;" @click="closeDiv">确定</a>
        </div>
      </div>
.cookieDiv {
  width: 100%;
   background: #000;
  height: 60px;
  position: fixed;
  bottom:0px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin:0 auto;
}
.cookieDiv span {
  color: #f0f3fb;
  font-size: 16px;
  margin-left:20px;
}
.cookieDiv a {
  color: red;
}
.cookieDiv .aDiv a {
  height: 60px;
  width:100px;
  background: red;
  color: white;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

用的是vue框架,下面是方法methods中的内容:

// cookie
    getCookie: function (cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          console.log(c , 'c')
          while (c.charAt(0) == ' ') c = c.substring(1);
          if (c.indexOf(name) != -1){
            return c.substring(name.length, c.length);
          }
        }
        return "";
      },
      setCookie: function (cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        console.info(cname + "=" + cvalue + "; " + expires);
        document.cookie = cname + "=" + cvalue + "; " + expires;
        console.log(document.cookie);
      },
         clearCookie: function () {
        this.setCookie("传给cookie的值 可以自定义", "", -1000);//设置天数
      },
      checkCookie: function () {
        var user = this.getCookie("传给cookie的值 可以自定义");
        if (user != "") { 
          this.cookieDivOr=false
        // console.log(1111)
        } else {
         // console.log(2222)
            this.cookieDivOr=true
          }
        
    },
  closeDiv(){
    // console.log('123123');
    this.setCookie('传给cookie的值 可以自定义','1',1000)//设置天数
    this.cookieDivOr = false
  },

在return内部要写上:

export default {
  data() {
    return {
      //隐私证明显示
      cookieDivOr: true,
        }
    }
}

和方法methods平级再建立一个created:

created(){
    this.checkCookie()
  }

最终可以实现:

        第一次进入网站时,显示该弹框,在点击‘同意’后再次进入不再显示该弹框,但在清除cookie后刷新页面依然可以显示该弹框。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VUE框架中同意使用cookie弹框,第一次进入网站展示,点击同意后不再显示 的相关文章

  • SpiderFlow爬虫平台 前台RCE漏洞复现(CVE-2024-0195)

    0x01 产品简介 SpiderFlow是新一代爬虫平台 以图形化方式定义爬虫流程 以流程图的方式定义爬虫 不写代码即可完成爬虫 是一个高度灵活可配置的爬虫平台 0x02 漏洞概述 SpiderFlow爬虫平台src main java o
  • 掌握内网渗透之道,成为实战高手,看《内网渗透实战攻略》就够了

    文末送书 文末送书 今天推荐一本网络安全领域优质书籍 内网渗透实战攻略 文章目录 前言 如何阅读本书 目录 文末送书 前言 当今 网络系统面临着越来越严峻的安全挑战 在众多的安全挑战中 一种有组织 有特定目标 长时间持续的新型网络攻击日益猖
  • 接口测试之Fiddler弱网测试

    前言 目前市面上的APP功能越来越丰富 移动端测试也越显为重要 因为用户在网速慢的情况下 你的网站 软件 总能出现各种各样的问题 请不要忽略这一点 针对在不同的网络情况下 接下来 本篇要讲述的就是在通过fiddler对APP进行模拟弱网测试
  • Web 安全漏洞之 OS 命令注入

    什么是 OS 命令注入 上周我们分享了一篇 Web 安全漏洞之 SQL 注入 其原理简单来说就是因为 SQL 是一种结构化字符串语言 攻击者利用可以随意构造语句的漏洞构造了开发者意料之外的语句 而今天要讲的 OS 命令注入其实原理和 SQL
  • 5个步骤,教你瞬间明白线程和线程安全

    记得今年3月份刚来杭州面试的时候 有一家公司的技术总监问了我这样一个问题 你来说说有哪些线程安全的类 我心里一想 这我早都背好了 稀里哗啦说了一大堆 他又接着问 那你再来说说什么是线程安全 然后我就GG了 说真的 我们整天说线程安全 但是对
  • 前端必备的 web 安全知识手记

    前言 安全这种东西就是不发生则已 一发生则惊人 作为前端 平时对这方面的知识没啥研究 最近了解了下 特此沉淀 文章内容包括以下几个典型的 web 安全知识点 XSS CSRF 点击劫持 SQL 注入和上传问题等 下文以小王代指攻击者 话不多
  • WEB前端常见受攻击方式及解决办法总结

    一个网址建立后 如果不注意安全问题 就很容易被人攻击 下面讨论一下集中漏洞情况和放置攻击的方法 一 SQL注入 所谓的SQL注入 就是通过把SQL命令插入到web表单提交或输入域名或页面请求的查询字符串 最终达到欺骗服务器执行恶意的SQL命
  • WEB前端常见受攻击方式及解决办法总结

    一个网址建立后 如果不注意安全问题 就很容易被人攻击 下面讨论一下集中漏洞情况和放置攻击的方法 一 SQL注入 所谓的SQL注入 就是通过把SQL命令插入到web表单提交或输入域名或页面请求的查询字符串 最终达到欺骗服务器执行恶意的SQL命
  • 每天10个前端小知识 <Day 6>

    前端面试基础知识题 1 使用js实现二分查找 二分查找 也称为折半查找 是指在有序的数组里找出指定的值 返回该值在数组中的索引 查找步骤如下 从有序数组的最中间元素开始查找 如果该元素正好是指定查找的值 则查找过程结束 否则进行下一步 如果
  • 「网络安全渗透」如果你还不懂CSRF?这一篇让你彻底掌握

    1 什么是 CSRF 面试的时候的著名问题 谈一谈你对 CSRF 与 SSRF 区别的看法 这个问题 如果我们用非常通俗的语言讲的话 CSRF 更像是钓鱼的举动 是用户攻击用户的 而对于 SSRF 来说 是由服务器发出请求 用户 日 服务器
  • 基于java的web仓库管理系统设计与实现

    基于java的web仓库管理系统设计与实现 I 引言 A 研究背景和动机 基于Java的Web仓库管理系统是近年来快速发展的领域之一 它提供了丰富的功能 如数据存储 数据检索 数据分析和数据可视化等 本文将重点介绍基于Java的Web仓库管
  • 点击存储到固定时间清除存储

    这段代码 无意间想到的 随便写了下来 运行 根据点击之后传递一个参数 将他存入本地存储 方便测试为10秒 10秒后触发下一个事件 清除本地存储 结束
  • 低代码配置-组件列表设计

    过滤字段功能 配置了api 启用 输出配置 filter type Array default gt
  • 课设:NFA确定化和最小化程序的设计与实现(html+css+js实现)

    文章目录 问题描述 待解决问题 1 如何存储NFA或者是DFA 2 NFA多初态问题 3 子集化过程思路 4 分割法过程思路 使用方法 下载链接 问题描述
  • 低代码配置-属性配置面板设计

    模块设计 tab项切换 组件基础属性 组件数据属性 组件事件属性 表单属性 模块输出函数设计 tab切换函数 列表表单属性 数据来源 调用接口时一次赋予 无需使用selectItem 如需使用 归入基础属性 列表标题 是否展示筛选区域
  • 考虑光伏出力利用率的电动汽车充电站能量调度策略研究(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码 数据
  • 全网最全(黑客)网络安全自学路线!熬夜两周整理(巨详细)

    学网络安全有什么好处 1 可以学习计算机方面的知识 在正式学习网络安全之前是一定要学习计算机基础知识的 只要把网络安全认真的学透了 那么计算机基础知识是没有任何问题的 操作系统 网络架构 网站容器 数据库 前端后端等等 可以说不想成为计算机
  • 为什么我强烈推荐大学生打CTF!

    前言 写这个文章是因为我很多粉丝都是学生 经常有人问 感觉大一第一个学期忙忙碌碌的过去了 啥都会一点 但是自己很难系统的学习到整个知识体系 很迷茫 想知道要如何高效学习 这篇文章我主要就围绕两点 减少那些罗里吧嗦的废话 直接上干货 CTF如
  • 考虑光伏出力利用率的电动汽车充电站能量调度策略研究(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码 数据
  • Vue中下载不同文件常用的方式

    1 使用window open方法下载文件

随机推荐

  • GoogLeNet论文阅读笔记

    目录 前言 GoogLeNet论文阅读笔记 Abstract 1 Introduction 2 Related Work 3 Motivation and High Level Considerations 4 Architectural
  • 上升沿_输入输出的上升沿和下降沿是怎么来的,一起看看

    高电平 低电平 上升沿和下降沿的区别 数字电路中 电平从低电平 逻辑信号为0 变为高电平 逻辑信号为1 的那一瞬间叫作上升沿 电平从高电平 逻辑信号为1 变为低电平 逻辑信号为0 的那一瞬间叫作下降沿 高电平触发 是指I O口电平为高电平时
  • Java实现给定两个 int 变量, 交换变量的值

    给定两个 int 变量 交换变量的值 1 创建变量i实现交换 2 不创建临时变量利用加减法实现 public class Solution public static void main String args int a 10 int b
  • C++ C2460 error

    关于该错误的官方说明 https msdn microsoft com en us library 1kf0205c aspx 结构形如 identifier1 uses identifier2 类或结构 identifier2 被声明为其
  • django中的跨域问题以及解决策略

    目录 跨域请求 同源策略 CORS 跨域资源共享 简介 CORS基本流程 解决跨域问题的方法 CORS两种请求详解 预检 解决跨域问题 服务端 简单请求 非简单请求 解决跨域问题 第三方 后端配置 解决跨域问题 前端 跨域请求 跨域是指浏览
  • Object Detection网络框架学习:Faster-RCNN

    经过RCNN和Fast RCNN的积淀 Ross B Girshick在2016年提出了新的Faster RCNN 在结构上 Faster RCN已经将特征抽取 feature extraction proposal提取 bounding
  • Linux找回root密码(Centos 7)

    首先 启动系统 进入开机界面 在界面中按 e 进入编辑界面 手速一定要快 进入编辑界面 使用键盘上的上下键把光标往下移动 找到以 Linux16 开头内容所在的行数 把光标移动到最尾部 在行的最后面输入 init bin sh 接着 输入完
  • vue实现点击两个按钮互相切换背景色

    首先准备两个按钮
  • HTTP中Put和Post的区别

    解释HTTP中Put和Post 它们有什么区别 哪个使用时更加安全 Put和Post都是浏览器向网页服务器提交数据的方法 Put把要提交的数据编码在url中 比如 http hi baidu com mianshiti key1 value
  • 【狂神说Mybatis29道练习题】

    Mybatis Mybatis动态SQL 狂神说学习笔记 29道练习题 Mybatis动态SQL 狂神说学习笔记 29道练习题 以下代码分为工具类 几个配置文件 mybatis config xml 实体类 持久层 mapper映射文件 测
  • 小程序原生和wepy、mpvue、uni-app、taro等主流开发框架,哪个好?这里是深度横评对比

    如下文章为2019年4月发布 2020年的测评版本也已出炉 最新评测点击 跨端开发框架深度横评之2020版 上周 Taro 团队发布了一篇 小程序多端框架全面测评 让开发者对业界主流的跨端框架 有了初步认识 感谢 Taro 团队的付出 不过
  • 【LeetCode】MySQL数据库简单题

    简单题近期打卡 1322 广告效果 1322 1 SQL架构 1322 2 题目要求 1322 3 代码实现 585 2016年的投资 585 1 SQL架构 1327 列出指定时间段内所有的下单产品 1327 1 SQL架构 1327 2
  • 【千律】C++基础:多态性与虚函数

    虚函数 通过父类的指针 指向子类的对象 调用虚函数时 调用子类的函数 include
  • 搭建完全分离式LNMP平台的简单案例

    案例拓扑图 安装配置nginx服务器 编译安装nginx时 需要事先安装 开发包组 Development Tools 和 Server Platform Development 同时还需专门安装pcre devel包 yum y grou
  • Git官网下载太慢,解决方案

  • 银行客户流失分析预测

    客户流失意味着客户终止了和银行的各项业务 毫无疑问 一定量的客户流失会给银行带来巨大损失 考虑到避免一位客户流失的成本很可能远低于挖掘一位新客户 因此对客户流失情况的分析预测至关重要 本文分析了某银行10000条客户信息 含14个字段 接下
  • 1X1卷积的作用,以及pytorch代码实现简单程序

    解释 从从某种程度来讲用1 1卷积并不是是网络变得更深 而是更宽 这里的宽实际上是增加数据量 但是通过1 1的卷积我们就可以对原始图片做一个变换 得到一张新的图片 从而可以提高泛化的能力减小过拟合 同时在这个过程中根据所选用的1 1卷积和f
  • MapBox根据鼠标位置显示经纬度组件

    只需要将map实例传进来就可以了 可以通过props 也可以通过vuex pinia等 原理就是监听mousemove事件 将经纬度取出来就可以 完整组件如下
  • Vue 中 v-if 用于判断某个变量是否在列表中

    本人使用的方法是 list列表的includes函数 判断name变量是否包含中 name1 name2 name3 中 是可以跑通的 v if name1 name2 name3 includes name 查了网上还有一种方式 v if
  • VUE框架中同意使用cookie弹框,第一次进入网站展示,点击同意后不再显示

    需求 全幅横栏 点击确认后隐藏 文案 我们想使用cookie以便更好了解您对本网站的使用情况 这将有助于改善您今后访问本网站的体验 关于cookie的使用 以及如何撤回或管理您的同意 请详见我们的隐私政策 如您点击右侧确认按钮 将视为您同意