Remove elements for 10 minutes after closing it-CodePudding

I want to remove a newsletter element for 10 minutes after closing it. The panel should remain removed if the page is reloaded within that timespan. I was thinking of using localstorage but as far I know localstorage does not have expiration. I'm thinking of using setTimeout but not sure how to use it in this context. Also, this should be done purely with Javascript without any library. JSFiddle.

<section class="newsletter">
  <div id="newsletter_container" class="newsletter_class">
    <h1>
      Panel Title
      <button id="close_btn">
        close
      </button>
    </h1>
    <h3>Panel content
    </h3>
  </div>
</section>

.newsletter {
    position: fixed;
    bottom: 0;
}



@keyframes Slide_down {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(250px);
    }

}

#newsletter_container {
  display: block;
    background-color: rgb(0, 122, 193,0.7);
    width: 500px;
}

.slide_down {
  animation: Slide_down 1.4s ease;
}


.newsletter_class {
    display: none;
}



#close_btn {
    float: right;
    background-color: rgb(0, 122, 193,0.7);
    border: none;
    cursor: pointer;
}



@media only screen and (max-width:500px) {
    #newsletter_container {
        width: auto;
    }

    .newsletter_button {
        width: 75%;
        padding: 5px 5px;
        margin-left: 10px;
        margin-bottom: 10px;
    }
}

#newsletter_container h1, h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    padding: 5px 10px;
}

#newsletter_container h1 {
    font-size: 16px;
}

#newsletter_container i {
    color: white;
}

#newsletter_container h3 {
    font-size: 12px;
}

const newsletter = document.getElementById("newsletter_container");
const closeBtn = document.getElementById("close_btn");

closeBtn.addEventListener("click",()=>{
    newsletter.classList.add("slide_down");
    newsletter.addEventListener("webkitAnimationEnd",function(){
        newsletter.remove();
    });
});

Edit: I've used localStorage to remove the elements after reloading, but it's not permanently removed after reloading. JSFiddle.

let removeNewsletter = localStorage.getItem('removeNewsletter');

const closeNewsLetter = () => {
    newsletter.classList.add("close");
    localStorage.setItem('removeNewsletter','enabled');
}


if(removeNewsletter === 'enabled'){
    newsletter.style.display = "none"
    newsletter.addEventListener("animationend",function(){
        newsletter.remove();
    });
} 

closeBtn.addEventListener("click",()=>{
    removeNewsletter = localStorage.getItem('removeNewsletter');
    if(removeNewsletter !== 'enabled'){
        newsletter.addEventListener("animationend",function(){
            newsletter.remove();
        });
        closeNewsLetter();
    }
});

var storeddate = Number(localStorage.getItem("storedate"));
if(storeddate){
    let diff = (Date.now() - storeddate / 60000);
    if(diff < 10){
       newsletter.remove();
    }
}

//localStorage.setItem('removeNewsletter',null);

CodePudding user response：

Use the javascript Date.now() method to get the start time and save it in the local storage. Get another Date.now() when the page loads to compare with the stored time (if any) when the page refreshes and check if the difference is longer than 10 mins.

You can compare both like this:

var storeddate = Number(localStorage.getItem("storeddate"));
if (storeddate){
var diff = (Date.now() - storeddate) / 60000;

if (diff < 10){
newsletter.style.display = "none";
}
}

ps: the Date.now() time is in milliseconds so to get it in minutes you need to divide it by 60000