资讯专栏INFORMATION COLUMN

由一个需求(广告每天弹一次)引发……

funnyZhang / 1584人阅读

摘要:需求用户每天第一次打开网页时弹出一条广告,并且可以选择关闭默认当天不再弹出和近期不再弹出。实质是这段代码如果以周六为最后一天,这里就是用减获取年和月的最后一秒就很简单了。

需求:用户每天第一次打开网页时弹出一条广告,并且可以选择关闭(默认当天不再弹出)和近期不再弹出。如何从头开始实现?

弹出框

这里用alert代替了,可以用插件如https://v3.bootcss.com/javascript/#popovershttp://element-cn.eleme.io/#/zh-CN/component/dialog等实现。

Cookie
前端设置方法
document.cookie = "date="+new Date(); // 创建一条cookie,浏览器关闭后就清理
document.cookie = "user=mine;expires=" + new Date().setDate(time.getDate() + 7); // 再创建一条cookie,7天后会自动清理
console.log(document.cookie); // user=mine; date=Thu Dec 20 2018 15:26:45 GMT+0800 (中国标准时间) */
自行封装setCookiegetCookieremoveCookie
function setCookie(name, value, expires){
    document.cookie = `${name}=${value};expires=${expires}`;
}
function getCookie(name){
    let cookies = document.cookie.split("; ");
    let values = [];
    for(var i=0; i
服务端设置方法

Http无状态协议,只能在同一个网站(包括多个页面)下获取,存储在客户端本地的一段信息,帮助我们存储信息获取信息。但是同样有风险:我们自己在浏览器上可以操作或者设置Cookie。

const express = require("express")
const cookieParser = require("cookie-parser")
const app = express()

app.use(cookieParser())

app.get("/", (req,res)=>{
    res.send("欢迎" + req.cookies.username); // 如果有username cookie则显示username,否则显示undefined
})

app.get("/login", (req,res)=>{
    let username = req.query.username;
    res.cookie("username",username,{maxAge:99999, httpOnly:true}); // maxAge:cookie的有效期;httpOnly设置为true,可以防止XSS攻击,只能被web serve访问,不能通过document.cookie获取
    res.send("登录成功");
})

app.listen(80);
至此,需求的思路就可以实现
// 选择关闭(默认当天不再弹出)
if(!getCookie("isAlert")){
    alert("我是弹出层");
    let now = new Date();
    setCookie("isAlert", "不要弹出了", new Date(now.getFullYear(), now.getMonth(), now.getDate(), "23", "59", "59"));
}
// 选择近期(7天)不再弹出
if(!getCookie("isAlert")){
    alert("我是弹出层");
    let now = new Date();
    setCookie("isAlert", "不要弹出了", new Date(now.getFullYear(), now.getMonth(), now.getDate()+7, "23", "59", "59"));
}
cookie的学习

同一网站共享一套cookie,它的数量和大小有限,有过期时间,JS中可以用document.cookie设置和访问。

实现一个记住用户名(30天)和密码(7天)的需求

// html code
// js code // setCookie getCookie removeCookie 前面以封装 var user = document.getElementById("user"); var psd = document.getElementById("psd"); var clear = document.getElementById("clear"); form.onsubmit = function(){ var userTime = new Date(); userTime.setDate(userTime.getDate() + 30); var psdTime = new Date(); psdTime.setDate(psdTime.getDate() + 7); setCookie("user", user.value, userTime); setCookie("psd", psd.value, psdTime); } user.value = getCookie("user"); psd.value = getCookie("psd"); clear.onclick = function () { removeCookie("user"); removeCookie("psd"); user.value = ""; psd.value = ""; };

jquery-cookie https://cdn.bootcss.com/jquery-cookie/1.4.0/jquery.cookie.min.js

获取:$.cookie("name"),不存在就返回undefined,不管你看到的是什么,它都是字符串

设置、修改:

$.cookie("name", "value") 有效期至当前会话关闭

$.cookie("name", "value", {expires: 7, path: "/"}) 有效期7天,有效路径是"/"

删除:$.cookie("name", null); $.cookie("name", "", {expires: -1})

小技巧

怎么获取当天最后一秒的时间戳

let now = new Date();
let resDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), "23", "59", "59").getTime();

怎么获取N天后的此时

function N(N){
    let now = new Date();
    now.setDate(now.getDate() + N);
    return now;
}

怎么获取本周最后一秒

let now = new Date();
let day = now.getDay() || 7;
/* 
    隐藏知识点:星期天返回的是0,typeof(now.getDay()) == "number" ,0 == false。
    实质是这段代码 day = now.getDay() === 0 ? 7 : now.getDay();
*/
let weekLastDate = now.getDate()+(7-day); // 如果以周六为最后一天,这里就是用6减
let resWeek = new Date(now.getFullYear(), now.getMonth(), weekLastDate, "23", "59", "59");

获取年和月的最后一秒就很简单了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100411.html

相关文章

  • 每天打开页面,只一次提示框。

    摘要:手机推出新功能邻里互撩让沟通无障碍群组模式让群聊嗨起来前往当前时间戳当前日期当日凌晨的时间戳减去一毫秒是为了防止后续得到的时间不会达到的状态当日已经过去的时间毫秒当日剩余时间创建为想要取到的键值的键名 html: e手机App推出新功能 邻里互撩,让沟通无障碍! 群组模式,让群聊嗨起来! 前往eApp js:$(function(){ f...

    stackvoid 评论0 收藏0
  • js+canvas仿微信《弹一弹》小游戏

    摘要:在弹一弹游戏中,小球不能向上发射。这里又有一个坑弹一弹游戏中,刚射击出去的小球是不受重力影响的不然瞄准还有什么意义。 前言 半年前用js和canvas仿了热血传奇网游(地址),基本功能写完之后,剩下的都是堆数据、堆时间才能完成的任务了,没什么新鲜感,因此进度极慢。这次看到微信《弹一弹》比较火,因为涉及到物理引擎(为了真实),于是动手试了一下。一共用了10个小时,不仅完成了这个demo,...

    Invoker 评论0 收藏0
  • 一次排查页面重复请求的经历

    摘要:前段时间重构一个页面,页面中存在通过第三方代码插入的动态广告正常的产品需求,上线后发现第三方的广告资源存在重复请求的问题。所以,同一个请求会触发两次的原因页面加载时渲染元素会触发第一次请求,执行代码导致重新渲染触发第二次请求。 前段时间重构一个页面,页面中存在通过第三方JavaScript代码插入的动态广告(正常的产品需求),上线后发现第三方的广告资源存在重复请求的问题。由于控制广告插...

    notebin 评论0 收藏0
  • 一次排查页面重复请求的经历

    摘要:前段时间重构一个页面,页面中存在通过第三方代码插入的动态广告正常的产品需求,上线后发现第三方的广告资源存在重复请求的问题。所以,同一个请求会触发两次的原因页面加载时渲染元素会触发第一次请求,执行代码导致重新渲染触发第二次请求。 前段时间重构一个页面,页面中存在通过第三方JavaScript代码插入的动态广告(正常的产品需求),上线后发现第三方的广告资源存在重复请求的问题。由于控制广告插...

    hightopo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<