localStorage SET 仅一天-解网

问：

我需要放一个弹出窗口。它将每天更新，因此如果用户访问网站（新用户甚至以前访问过的用户），弹出窗口需要每天在页面加载时显示，但如果用户点击通知，则需要在重置之前保持隐藏 24 小时。我已经编写了这段代码，但无法使用 localStorage 让它与上次显示时进行比较。

  var modal = document.querySelector(".opening-modal");
  var close = document.getElementById("pageDiv");
  var element = document.getElementById("pageDiv");

    function popupShown() {
        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.setTimeout(popupShown, 1500);
    window.addEventListener("click", closeModal);

JavaScript 模态对话框弹出窗口

var popupId = 42; // This is the number that changes when the content changes
if (+localStorage.dismissedPopup !== popupId) {
    // Either the user has never dismissed one of these, or it's not the most recent one
    window.setTimeout(popupShown, 1500);
}
function closeModal() {
    element.classList.add("hide-modal");
    // Remember the ID of the most recent modal the user dismissed
    localStorage.dismissedPopup = popupId;
}

如果要从 HTML 驱动此内容，则 ID 可以来自属性：data-*

<div id="pageDiv" data-popup-id="42">An important update about...</div>

然后：

var popupId = +element.getAttribute("data-popup-id");

但是，如果您希望它是基于时间的，请存储上次关闭的时间：

if (!localStorage.lastPopupDismissed ||
    (Date.now() - localStorage.lastPopupDismissed) > (24 * 60 * 60 * 1000))) {
    window.setTimeout(popupShown, 1500);
}
function closeModal() {
    element.classList.add("hide-modal");
    // Remember the ID of the most recent modal the user dismissed
    localStorage.lastPopupDismissed = Date.now();
}

localStorage SET 仅一天

localStorage SET for just one day

评论

评论