How to save Jquery click event to local storage to hide css for a specific period-CodePudding

I am not good with Javascript and would appreciate any help here. I have a written a css that display announcement when webpage loads up with a close button to hide the entire css and its contents using Jquery animate.

I would like to use localstorage to keep it hidden once clicked till after a specific period of time, lets say 24hrs, so that when user reloads page, it doesn't show till after the specified period of time.

My code is

$('.cta-floating_close').click(function() {
    $('.cta-floating_component').each(function() {
            $(this).animate({
                top: '-200px',
            }, 500 ); 
    });
});

.cta-floating_component {
  position: fixed;
  left: auto;
  top: 9rem;
  right: 2rem;
  z-index: 1000;
  display: none;
  max-width: 16rem;
  padding: 1rem 2rem;
  border-radius: 1rem;
  background-image: -webkit-gradient(linear, left top, right top, from(#b671e4), to(#f01486));
  background-image: linear-gradient(90deg, #b671e4, #f01486);
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  color: #fff;
}

.cta-floating_close {
  position: absolute;
  left: auto;
  top: -7px;
  right: 0rem;
  bottom: auto;
  font-size: 1.8rem;
  cursor: pointer;
}

.cta-floating {
  position: relative;
  z-index: 3000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div ><div  style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; display: block; opacity: 0.9;"><font color="white">Annoucement appears here!</font><div >X<i ></i></div></div></div>

How do i implement this? Thanks in anticipation

CodePudding user response：

On close click, you can set the time until it should be hidden to the localStorage. In this example it's basically now plus 10 seconds (adjust how you need it).

Then setInterval to periodically check if that time has been reached or not.

The same on $(document).ready in case the viewer has left the page and came back again.

    $('.cta-floating_close').click(function() {
        const now = new Date();
        let then = new Date();
        then.setTime(now.getTime()  (10*1000)); //10 seconds

        localStorage.setItem('showAt', then);
        setInterval(ShowButton, 1000)


    $('.cta-floating_component').each(function() {
            $(this).animate({
                top: '-200px',
            }, 500 ); 
    });
    
});

$(document).ready(function(){ 
    console.log('ready')
        ShowButton()
        setInterval(ShowButton, 1000)
}) 


function ShowButton(){
    if(new Date(localStorage.getItem('showAt')) < new Date()){
        const element = document.getElementsByClassName('cta-floating_component')[0]
        element.style.display = 'block';
        element.style.top = '';
    }else{
        document.getElementsByClassName('cta-floating_component')[0].style.display = 'none';
    }
}

.cta-floating_component {
  position: fixed;
  left: auto;
  top: 9rem;
  right: 2rem;
  z-index: 1000;
  display: none;
  max-width: 16rem;
  padding: 1rem 2rem;
  border-radius: 1rem;
  background-image: -webkit-gradient(linear, left top, right top, from(#b671e4), to(#f01486));
  background-image: linear-gradient(90deg, #b671e4, #f01486);
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  color: #fff;
}

.cta-floating_close {
  position: absolute;
  left: auto;
  top: -7px;
  right: 0rem;
  bottom: auto;
  font-size: 1.8rem;
  cursor: pointer;
}

.cta-floating {
  position: relative;
  z-index: 3000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div ><div  style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; display: block; opacity: 0.9;"><font color="white">Annoucement appears here!</font><div >X<i ></i></div></div></div>