需求:用戶每天第一次打開網頁時彈出一條廣告,並且可以選擇關閉(默認當天不再彈出)和近期不再彈出。如何從頭開始實現?
彈出框
這裏用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})
- 獲取:$.cookie("name"),不存在就返回
小技巧
- 怎麼獲取當天最後一秒的時間戳
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");
獲取年和月的最後一秒就很簡單了。