javascriptlocal-storagesettimeoutshow-hidesavechanges

setTimeout only on first visit

I want to show my hidden div in 3 secs and after that, it will show even after the refresh, but the problem is when I reload the page I have to wait 3 secs again.

So I want to prevent the setTimeout function on page reload.

I tried localStorage to save my changes from style: display ="none" to style: display="block" but it seems like the setTimeout still working on page reload.

Please help I need to show my hidden div for 3 secs and after that no need to wait 3secs again and again on page reload. Here is my script

<body>
   <div id="img1" class="whatsapp" style="display: none;">
      <img src="https://pub-static.fotor.com/assets/projects/pages/d5bdd0513a0740a8a38752dbc32586d0/600w/fotor-03d1a91a0cec4542927f53c87e0599f6.jpg"/>
      <div class="whatsappbut">
        show me in 3 seconds and I will be here forever!
      </div>
   </div>
      
<script>
  var saveNow = localStorage.getItem('saveNow');
         
  if (!saveNow || saveNow == 'true') {
      setTimeout (function() {    
           document.getElementById("img1").style.display ='block';
           localStorage.setItem('saveNow', 'true');
      }, 1000 * 3);
  }
</script>
Solution

  • I use hidden and I name the variables in an understandable manner.

    Uncomment the localStorage calls when done testing. they do not work here at SO

    Change const showNow = null to const showNow = 'true' to see it work here

    <div id="whatsappDiv" class="whatsapp" hidden>
  <img src="https://pub-static.fotor.com/assets/projects/pages/d5bdd0513a0740a8a38752dbc32586d0/600w/fotor-03d1a91a0cec4542927f53c87e0599f6.jpg" />
  <div class="whatsappbut">
    show me in 3 seconds and I will be here forever!
  </div>
</div>
<script>
const showNow = null // localStorage.getItem('showNow');
const whatsapp = document.getElementById("whatsappDiv");
if (showNow) whatsappDiv.hidden = false;
else setTimeout(function() {
    whatsappDiv.hidden = false;
    // localStorage.setItem('showNow', 'true');
  }, 1000 * 3);
</script>