需求:用户每天第一次打开网页时弹出一条广告,并且可以选择关闭(默认当天不再弹出)和近期不再弹出。如何从头开始实现?弹出框这里用alert代替了,可以用插件如https://v3.bootcss.com/javascript/#popovers、http://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 (中国标准时间) /自行封装setCookie、getCookie、removeCookiefunction 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<cookies.length; i++){ values = cookies[i].split("=”); if(values[0] === name){ return values[1]; } } return null;}function removeCookie(name){ setCookie(name, “”, “-1”);}服务端设置方法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<form action="#" id=“form”> <input type=“text” id=“user”> <input type=“password” id=“psd”> <input type=“submit” value=“提交”> <input type=“button” id=“clear” value=“清除”></form>// 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”);获取年和月的最后一秒就很简单了。