使用 cookie 控制弹出模式

Question

我正在尝试使用 cookie 控制弹出模式的行为。理想情况下，功能如下：页面加载后约 3 秒弹出模式。如果用户关闭弹出模式，则会创建一个最长 2 天的 cookie（出于测试目的，我使用 30 秒的增量）。逻辑是，如果 cookie 不存在，即当它过期时，'show' 的 class 将被添加到模式中，使其再次出现。首先，我根本无法让它工作。第二个问题是让模式首先出现。我最初的想法是设置一个计时器，但每次用户导航或刷新时它都会一直出现。然后我尝试添加一个 cookie 以使用事件侦听器“DOMConentLoaded”初始设置 class，但这给了我同样的问题。我是 cookie 的新手，正在学习如何使用它们。有任何想法吗？非常感谢！

<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}`;
};

使用 cookie 控制弹出模式

Control popup modal with cookies

javascript

cookies