时间戳

首页 > 解决方案 > 使用 cookie 只显示我的弹出窗口一次？

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

问题描述

我正在努力将 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);

标签： javascript

解决方案

您可以使用localStorage或sessionStorage。

whilelocalStorage访问当前域的本地Storage 对象并向其添加数据项，sessionStorage访问当前域的会话Storage 对象并向其添加数据项。

    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与您的浏览器会话一样长，但这些localStorage项目没有到期时间。话虽如此，在您当前的情况下，您可以使用localStorage或sessionStorage。

推荐阅读