javascript - 使用 cookies 只显示我的弹出窗口一次？

Question

我正在努力将 cookie 控件添加到我的弹出窗口中，以便它只显示一次。

 var modal = document.querySelector(".modal");
 var close = document.getElementById("myDiv");
 var element = document.getElementById("myDiv");

 function popupScroll() {
    element.classList.add("show-modal");
 }
 function closeModal() {
    element.classList.add("hide-modal");
 }
 window.addEventListener("scroll", popupScroll);
 window.addEventListener("click", closeModal);

Answer 1

您可以使用localStorage或sessionStorage .

当localStorage访问当前域的本地存储对象并向其添加数据项时，sessionStorage访问当前域的 session 存储对象并向其添加数据项。

    var modal = document.querySelector(".modal");
    var close = document.getElementById("myDiv");
    var element = document.getElementById("myDiv");

    function popupScroll() {
        if (!localStorage.getItem('showPopup')) { //check if popup has already been shown, if not then proceed
            localStorage.setItem('showPopup', 'true'); // Set the flag in localStorage
            element.classList.add("show-modal");
        }
    }
    function closeModal() {
        element.classList.add("hide-modal");
    }
    window.addEventListener("scroll", popupScroll);
    window.addEventListener("click", closeModal);

请记住，虽然 sessionStorage 中设置的项目的持续时间与浏览器 session 一样长，但 localStorage 项目没有过期时间。话虽这么说，在您当前的情况下，您可以使用 localStorage 或 sessionStorage。