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弹框,第一次进入网站展示,点击同意后不再显示 的相关文章

  • ECMAScript简介及特性介绍

    ECMAScript 简称ES 是JavaScript的规范 同时也是被广泛采用和实现的脚本语言标准 从最初的1996年推出第一版至今 ECMAScript已经经历了数十年的发展和改进 成为了互联网开发中的重要基石之一 本文将对ECMASc
  • 掌握内网渗透之道,成为实战高手,看《内网渗透实战攻略》就够了

    文末送书 文末送书 今天推荐一本网络安全领域优质书籍 内网渗透实战攻略 文章目录 前言 如何阅读本书 目录 文末送书 前言 当今 网络系统面临着越来越严峻的安全挑战 在众多的安全挑战中 一种有组织 有特定目标 长时间持续的新型网络攻击日益猖
  • 信号浪涌保护器的原理和行业应用方案

    信号浪涌保护器 Surge Protective Device 简称SPD 是一种用于限制信号线路中瞬态过电压和分泄浪涌电流的防雷装置 主要用于保护各类信号线路及设备的防雷安全 信号浪涌保护器的原理是利用气体放电管 压敏电阻 齐纳二极管等非
  • Android SDK开发艺术探索(五)安全与校验

    一 前言 本篇是Android SDK开发艺术探索系列的第五篇文章 介绍了一些SDK开发中安全方面的知识 包括资源完整性 存储安全 权限校验 传输安全 代码混淆等知识 通过基础的安全配置为SDK保驾护航 探索SDK开发在安全方面的最佳实践
  • 基于java的饮食分享平台系统设计与实现

    基于java的饮食分享平台系统设计与实现 I 引言 A 研究背景和动机 近年来 随着人们生活水平的提高和健康意识的增强 饮食健康已经成为越来越多人的关注焦点 因此 一个方便快捷的饮食分享平台就显得尤为重要 基于Java的饮食分享平台系统设计
  • HTML概述、基本语法(表格整理、标签、基本结构)

    一 HTML概述 HTML指的是超文本标记语言 超文本 是指页面内可以包含图片 链接 声音 视频等内容 标记 标签 通过标记符号来告诉浏览器页面该如何显示 我们可以打开浏览器 右击页面 点击 查看网页源代码 来方便了解HTML标签通过浏览器
  • Vue3 和Vue2的区别,以及钩子函数的使用

    Vue js 3 和 Vue js 2 是两个主要版本的流行前端框架 它们之间有很多区别 包括性能优化 新特性和改进的API等 以下是一些Vue 3与Vue 2之间的主要区别 以及一些示例代码来说明这些差异 1 性能优化 响应式系统 Vue
  • 低代码配置-组件列表设计

    过滤字段功能 配置了api 启用 输出配置 filter type Array default gt
  • 网络安全基础知识面试题库

    1 基于路由器的攻击手段 1 1 源IP地址欺骗式攻击 入侵者从外部传输一个伪装成来自内部主机的数据包 数据包的IP是 内网的合法IP 对策 丢弃所有来自路由器外端口 却使用内部源地址的数据包 1 2 源路由攻击 入侵者让数据包循着一个不可
  • 数据加密保障数据安全

    一 目标 1 1 预研需求 数据加密是安全领域中常用的安全措施 它们的主要作用是保护数据的机密性和完整性 以防止未经授权的访问 窃取 篡改或泄漏敏感信息 数据传输加密 保护敏感数据在传输过程中的安全 当数据通过网络传输时 它们可能会经过多个
  • JVM优化之 -Xss -Xms -Xmx -Xmn 参数设置

    JVM优化之 Xss Xms Xmx Xmn 参数设置 XmnXmsXmxXss有什么区别 Xmn Xms Xmx Xss都是JVM对内存的配置参数 我们可以根据不同需要区修改这些参数 以达到运行程序的最好效果 Xms 堆内存的初始大小 默
  • chrome浏览器无法在地址栏输入内容搜索问题解决--图文

    关于日常遇到的小问题解决记录一下 1 导航栏录入信息后跳转错误 2 解决办法 默认百度搜索引擎地址错误 百度正确的搜索格式是 http www baidu com s wd s chrome浏览器中百度的搜索格式是 http www bai
  • 全网最全(黑客)网络安全自学路线!熬夜两周整理(巨详细)

    学网络安全有什么好处 1 可以学习计算机方面的知识 在正式学习网络安全之前是一定要学习计算机基础知识的 只要把网络安全认真的学透了 那么计算机基础知识是没有任何问题的 操作系统 网络架构 网站容器 数据库 前端后端等等 可以说不想成为计算机
  • 网络安全(黑客)自学启蒙

    一 什么是网络安全 网络安全是一种综合性的概念 涵盖了保护计算机系统 网络基础设施和数据免受未经授权的访问 攻击 损害或盗窃的一系列措施和技术 经常听到的 红队 渗透测试 等就是研究攻击技术 而 蓝队 安全运营 安全运维 则研究防御技术 作
  • 考虑光伏出力利用率的电动汽车充电站能量调度策略研究(Matlab代码实现)

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

    大家都知道该赛项的规程和样题向来都是模棱两可 从来不说具体的内容 导致选手在备赛时没有头绪 不知道该怎么训练 到了赛时发现题目和备赛的时候完全不一样 那么本文将以往年信息安全管理与评估赛项经验来解读今年2023年国赛的规程 帮助选手们指明方
  • 【js学习之路】遍历数组api之 `filter `和 `map`的区别

    一 前言 数组是我们在项目中经常使用的数据类型 今天我们主要简述作用于遍历数组的api filter 和 map 的区别 二 filter和map的共同点 首先 我们主要阐述一下 filter 和 map 的共同点 api的参数都是回调函数
  • 【安全】Java幂等性校验解决重复点击(6种实现方式)

    目录 一 简介 1 1 什么是幂等 1 2 为什么需要幂等性 1 3 接口超时 应该如何处理 1 4 幂等性对系统的影响 二 Restful API 接口的幂等性 三 实现方式 3 1 数据库层面 主键 唯一索引冲突 3 2 数据库层面 乐
  • 深入解析 YAML 配置文件:从语法到最佳实践

    一 认识YAML YAML YAML Ain t Markup Language 是一种人类可读的数据序列化语言 它的设计目标是使数据在不同编程语言之间交换和共享变得简单 YAML采用了一种简洁 直观的语法 以易于阅读和编写的方式表示数据结
  • 【前端】canvas图片加文字

    注释标记了操作步骤 import React Component createRef from react class CertifyImgRender extends Component bgRef createRef

随机推荐

  • 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的使用 以及如何撤回或管理您的同意 请详见我们的隐私政策 如您点击右侧确认按钮 将视为您同意