摘要：需求用戶每天第一次打開網(wǎng)頁時彈出一條廣告，并且可以選擇關(guān)閉默認(rèn)當(dāng)天不再彈出和近期不再彈出。實(shí)質(zhì)是這段代碼如果以周六為最后一天，這里就是用減獲取年和月的最后一秒就很簡單了。

需求：用戶每天第一次打開網(wǎng)頁時彈出一條廣告，并且可以選擇關(guān)閉（默認(rèn)當(dāng)天不再彈出）和近期不再彈出。如何從頭開始實(shí)現(xiàn)？

這里用alert代替了，可以用插件如https://v3.bootcss.com/javascript/#popovers、http://element-cn.eleme.io/#/zh-CN/component/dialog等實(shí)現(xiàn)。

前端設(shè)置方法

document.cookie = "date="+new Date(); // 創(chuàng)建一條cookie，瀏覽器關(guān)閉后就清理
document.cookie = "user=mine;expires=" + new Date().setDate(time.getDate() + 7); // 再創(chuàng)建一條cookie，7天后會自動清理
console.log(document.cookie); // user=mine; date=Thu Dec 20 2018 15:26:45 GMT+0800 (中國標(biāo)準(zhǔn)時間) */

自行封裝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
服務(wù)端設(shè)置方法
Http無狀態(tài)協(xié)議，只能在同一個網(wǎng)站（包括多個頁面）下獲取，存儲在客戶端本地的一段信息，幫助我們存儲信息獲取信息。但是同樣有風(fēng)險：我們自己在瀏覽器上可以操作或者設(shè)置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設(shè)置為true，可以防止XSS攻擊，只能被web serve訪問，不能通過document.cookie獲取
    res.send("登錄成功");
})

app.listen(80);
至此，需求的思路就可以實(shí)現(xiàn)
// 選擇關(guān)閉（默認(rèn)當(dāng)天不再彈出）
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的學(xué)習(xí)
同一網(wǎng)站共享一套cookie，它的數(shù)量和大小有限，有過期時間，JS中可以用document.cookie設(shè)置和訪問。
實(shí)現(xiàn)一個記住用戶名（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，不管你看到的是什么，它都是字符串

設(shè)置、修改：


$.cookie("name", "value") 有效期至當(dāng)前會話關(guān)閉

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


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



小技巧
怎么獲取當(dāng)天最后一秒的時間戳
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;
/* 
    隱藏知識點(diǎn)：星期天返回的是0，typeof(now.getDay()) == "number" ，0 == false。
    實(shí)質(zhì)是這段代碼 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");
獲取年和月的最后一秒就很簡單了。