实际项目需求,用户当天第一次进入首页进行弹窗,当天再次进入不进行弹窗,以后进入也按此规律弹窗提示

实际业务需求:在用户当天首次进入时弹窗提示活动,再次进入不提示,以后每天进入按此规律提示
解决需求:前端通过cookie进行业务的实现
逻辑:

  1. 没有设置特定cookie或者当前日期大于cookie设置的日期则进行弹窗
  2. 不弹窗

代码实现,主要技术vue:
其实目前实现的是不区分用户,浏览器为谷歌,记录的也是当天某一个人进入首页的时期
(存在的问题,如果不同的用户在同一个浏览器不同时刻进入首页,那么此时其余用户进入时也不会进行弹窗,因为已经存有cookie了)

created(){
	// 活动,设置cookie存储时间
	this.getTimeSetCookieFun()
}
methods:{
          // 获取日期时间
          getTimeSetCookieFun(){
              var day = this.getCookieFun('day')=='' ? '':this.getCookieFun('day');
              if(day == ''){
                  // console.log('没有cookie,说明过期或者还没有存,弹窗22222,同时需要设置新的cookie')
                  this.isShowNewYearActivity = true;
                  var newTime = new Date().getDate();
                  this.setcookieTimeFun('day',newTime,1)
              }else{
                  var newTime = new Date().getDate();
                  if(newTime>day){
                      // console.log('我是新的一天,我要弹窗')
                      this.isShowNewYearActivity = true;
                      this.setcookieTimeFun('day',newTime,1)
                  }else{
                      this.isShowNewYearActivity = false;
                  }
              }
          },
            // 设置cookie时间
            setcookieTimeFun(name, value,Days){
                value = new Date().getDate();
                var exp = new Date(); 
                exp.setTime(exp.getTime() + Days*24*60*60*1000); 
                document.cookie = name+"="+value+";expires=" + exp.toGMTString(); 
            },
            // 取出设置的cookie时间,存在就返回获取到的值,不存在返回''
            getCookieFun(c_name){
                if (document.cookie.length > 0){
                    let c_start = document.cookie.indexOf(c_name+"="); 
                    if(c_start != -1){
                        c_start = c_start + c_name.length+1;
                        let c_end = document.cookie.indexOf(";", c_start)
                        if (c_end == -1){
                            c_end = document.cookie.length;
                        }
                        return decodeURIComponent(document.cookie.substring(c_start, c_end));
                    }
                }
                return "";
            },
            //移除某一个cookie
            delTimeCookie(name){
                var exp = new Date(); 
                exp.setTime(exp.getTime() - 1); 
                var cval=this.getCookieFun(name); 
                if(cval!=null) 
                    document.cookie= name + "="+cval+";expires="+exp.toGMTString(); 
            }
}

在进行cookie的设置之前,先进行获取,如果没有,则进行弹窗,同时设置当前的日期,利用封装的存储cookie的函数存储进cookie中,
如果存在cookie,那么获取当前的日期与取出的cookie中的日期进行判断,如果大于,说明日期已经更新,那么进行弹窗,并利用封装函数,重新设置cookie,反之,比较之后没有变化,则说明日期并没有改变,那么隐藏弹窗,不设置cookie

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值