Question 183542 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to fix issue with local storage?

I have a popup, which appears in 5(now) seconds after screen loading.
It has a special button – ‘don’t show more’. If user clicks on it, the popup has to not appear more.

html part(without other content)

 <div class="popup-footer">
<div class="popup">
    <div class="popup-inner d-flex">        
        <div class="popup-image">           
        </div>  
        <div class="popup-form">
            <div class="nevermore" id="nevermore">  Don't show again</div>          
        </div>
        <span class="fa-close popup-close"></span>
    </div>
</div>
</div>

jQuery part

jQuery(function(){
   setTimeout(function(){
     jQuery('.popup-footer').show();
     jQuery('body').addClass('overflow-hidden');     
   },5000);
}); 
    
jQuery('.popup-close').on("click", function(){
 jQuery(this).parent('div').parent('div').parent('.popup-footer').hide();
jQuery('body').removeClass('overflow-hidden');  
  });   
    
    
jQuery('div#nevermore').on("click", function(){
 jQuery(this).parent('div').parent('div').parent('div').parent('.popup-footer').hide();
jQuery('body').removeClass('overflow-hidden');      
  });       

    
    
let popupState = localStorage.getItem('popup_open');

if (popupState) {
    jQuery('.popup-footer').show();
}

jQuery('div#nevermore').on('click', function() {
    jQuery('.popup-footer').hide();
    localStorage.setItem('popup_open', 1);
});

It doesn’t work – even if I change the if-part from show to hide. The popup appears even if I click the button.If I change show to hide it doesn’t appear at all. I work with localStorage at first. What do I miss? The localStorage key is wrong? Please help me to understand.

Tags:

2

Answers


  1. 0

    You’ve set the popup to always appear after 5 seconds, unconditionally:

    jQuery(function(){
  setTimeout(function(){
    jQuery('.popup-footer').show();
    jQuery('body').addClass('overflow-hidden');     
  },5000);
});

    If this should only happen based on some condition, wrap it in that condition:

    if (popupState) {
  jQuery(function(){
    setTimeout(function(){
      jQuery('.popup-footer').show();
      jQuery('body').addClass('overflow-hidden');     
    },5000);
  });
}

    Though, is if (popupstate) really the condition you want? Aren’t you setting that value in localStorage if the user doesn’t want to see the popup again? In which case it would be:

    if (!popupstate) {

    (You’ll also need to move the creation of popupstate to the top of the code in order to use it before its current declaration line.)

    Login or Signup to reply.
  2. 0

    Take the boolean value from your checkbox, then have a conditional statement to run the setTimeout after the value of your checkbox passes through the conditional.
    Though this approach will not work across sessions.

    Describe the desired behavior to yourself and if you need to use the word "if" when explaining it, the function will more than likely need to be part of a conditional statement.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search