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访问当前域的 local 存储对象并向其中添加数据项，而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中设置的项目会持续您的浏览器会话，但是localStorage项没有到期时间。话虽如此，在您当前的情况下，您可以使用localStorage或sessionStorage。

Answer 2

我建议使用localStorage。它是具有setItem和getItem之类功能的Javascript API。这里是一个例子：

function displayPopup() {
  //if the variable in localStorage is set dont show the popup and just return
  if (localStorage.getItem('popupAlreadyShown')) return;

  //display popup, example: 
  document.getElementById('popup').style.display = 'block';
}

function closePopup() {
  //close popup, example: 
  document.getElementById('popup').style.display = 'none';
  //set the variable in localStorage that the popup is closed
  localStorage.setItem('popupAlreadyShown', 'true');
}

使用Cookie仅显示我的弹出窗口一次？

2 个答案: