实际项目需求,用户当天第一次进入首页进行弹窗,当天再次进入不进行弹窗,以后进入也按此规律弹窗提示
实际业务需求:在用户当天首次进入时弹窗提示活动,再次进入不提示,以后每天进入按此规律提示解决需求:前端通过cookie进行业务的实现逻辑:没有设置特定cookie或者当前日期大于cookie设置的日期则进行弹窗不弹窗代码实现,主要技术vue:其实目前实现的是不区分用户,浏览器为谷歌,记录的也是当天某一个人进入首页的时期(存在的问题,如果不同的用户在同一个浏览器不同时刻进入首页,那...
·
实际业务需求:在用户当天首次进入时弹窗提示活动,再次进入不提示,以后每天进入按此规律提示
解决需求:前端通过cookie进行业务的实现
逻辑:
- 没有设置特定cookie或者当前日期大于cookie设置的日期则进行弹窗
- 不弹窗
代码实现,主要技术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
更多推荐
已为社区贡献5条内容
所有评论(0)