共计 3301 个字符，预计需要花费 9 分钟才能阅读完成。
需求：用户每天第一次打开网页时弹出一条广告，并且可以选择关闭（默认当天不再弹出）和近期不再弹出。如何从头开始实现？
弹出框
这里用 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、removeCookie
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<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”);
获取年和月的最后一秒就很简单了。