набор localStorage всего на один день - PullRequest
Новая
       12

набор localStorage всего на один день

1 голос
/ 23 марта 2020

Мне нужно всплывающее окно. Он будет обновляться ежедневно, поэтому всплывающее окно должно отображаться каждый день при загрузке страницы, если пользователь заходит на веб-сайт (новые пользователи и даже пользователи, которые посещали ранее), но если пользователь щелкает уведомление прочь, он должен оставаться скрыто за 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);

1 Ответ

0 голосов
/ 23 марта 2020

Я бы дал каждому модалу идентификатор (по возрастанию) и сохранил идентификатор последнего модала, который пользователь отклонил. Таким образом, если модальное состояние не меняется в течение 48 часов вместо 24, пользователю снова не будет показано модальное значение. 

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, идентификатор может исходить из атрибута 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();
}
...