使用Cookie控制弹出模式

Question

我正在尝试用cookie控制弹出模式的行为。理想情况下，功能如下：加载页面后约3秒，模式弹出。如果用户关闭了弹出模式，则会创建一个最长期限为2天的cookie(出于测试目的，我使用30秒的增量(。逻辑是，如果cookie不存在，即当它过期时，一个"show"类将被添加到模态中，使其再次出现。首先，我根本无法做到这一点。第二个问题是让模态首先出现。我最初的想法是设置一个计时器，但之后每当用户导航或刷新时，它就会一直出现。然后我尝试添加一个cookie来使用事件监听器"初始设置类；DOMComponentLoaded"；，但这也给了我同样的问题。我是饼干的新手，正在学习如何使用饼干。有什么想法吗？提前感谢！

<div id="popup" class="popup grid u-bgColorPrimary">
<div class="grid__col--7">
<h1>New Popup</h1>
</div>
<div class="grid__col">
<div id="close" class="popup__close"></div>
<img src="<?php echo get_template_directory_uri() . '/lib/images/careers-bg.png'; ?>" alt="">
</div>
</div>

let popup = document.getElementById("popup");
let close = document.getElementById("close");
// Timer for Popup modal
// setTimeout(() => {
//   popup.classList.add("popup--show");
// }, 3000);
close.addEventListener("click", () => {
popup.classList.remove("popup--show");
});
document.addEventListener("DOMContentLoaded", () => {
let key = "initiate_cookie";
let value = encodeURIComponent("show_popup");
let age = 15;
let cookie = document.cookie = `${key}=${value};path=/;max-age=${age};`
if (cookie) {
popup.classList.add("popup--show");
} else {
popup.classList.remove("popup--show")
}
});
document.getElementById("close").addEventListener("click", (ev) => {
let key = "popup_display";
let value = encodeURIComponent("show");
let age = 30;
document.cookie = `${key}=${value};path=/;max-age=${age};`;
let cookie = document.cookie = `${key}=${value};path=/;max-age=${age};`

if (!cookie) {
popup.classList.add("popup--show");
} else {
popup.classList.remove("popup--show");
}
});

Answer 1

在决定是否应该显示弹出窗口之前，首先获取cookie。计时器是个好主意，但你需要知道是否需要启动计时器。

检查cookie是否存在。如果cookie尚未设置，则运行计时器并显示弹出窗口。每当弹出窗口关闭时，设置cookie。

下次加载页面时，它将再次评估cookie是否已设置，但现在应该设置，因此计时器将不会运行，弹出窗口也不会显示。

每当cookie过期并且页面再次加载时，弹出窗口将再次显示。

下面的示例演示了这种行为。

// Returns the cookie value or null.
const getCookie = name => {
const nameExpression = `${name}=`;
const cookies = document.cookie.split(';');
const cookie = cookies.find(currentCookie => currentCookie.includes(nameExpression));  
return cookie ? cookie.trim().substring(nameExpression.length, cookie.length) : null;
}
// Sets the cookie.
const setCookie = (name, value, expire = 365, path = '/') => {
const date = new Date();
date.setTime(date.getTime() + (expire * 24 * 3600 * 1000));
const expires = date.toUTCString();
document.cookie = `${name}=${value}; expires=${expires}; path=${path}`;
};
const popup = document.getElementById("popup");
const close = document.getElementById("close");
// Define the name of the cookie.
cookieName = "popup-display";
// First get the cookie..
const cookie = getCookie(cookieName);
// ..then check if the cookie is not set.
if (cookie !== 'show') {
// If it isn't set, show the popup after 3 seconds..
setTimeout(() => {
popup.classList.add("popup--show");
}, 3000);
// ..and add the event listener.
close.addEventListener("click", (event) => {

// Set the cookie with the value show for 2 days..
setCookie(cookieName, "show", 2);
// ..and hide the popup
popup.classList.remove("popup--show");
});
}

当前的setCookie函数以天为单位设置时间。为了帮助调试，请使用下面的函数，该函数以秒为单位设置时间。

const setShortCookie = (name, value, seconds, path = '/') => {
const date = new Date();
date.setTime(date.getTime() + (seconds * 1000));
const expires = date.toUTCString();
document.cookie = `${name}=${value}; expires=${expires}; path=${path}`;
};