• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 106
  • Last Modified:

once per session script

Hi,
I am trying to put a once per session script on a site was done on bootsrtrap4 for a modal pop up. I tried with two different scripts, unfortunately, none of them worked. I am a newbie in JS. I tried all I knew.... The scripts were copied from net, I have just adapted to my needs.
Script 1 opens automatically and closes automatically
<script>
jQuery(document).ready(function () {
    // Get saved data from sessionStorage
    var visited = sessionStorage.getItem('visited');

    setTimeout(function () {
        if (visited !== true) {
            $('#exModal1').modal('show');
            sessionStorage.setItem('visited', true); // Save data to sessionStorage
        } 
    }, 2000);

});
  setTimeout(function() {
    $('#exModal1').modal('hide');
}, 20000);
</script>

Open in new window

Script 2 opens and closes automatically
<script>
	   $(document).ready(function() {
	    $(function() {
  if (typeof Storage != "undefined") { //I put visited here, not working....
    if (!localStorage.getItem("done")) {
    
   setTimeout(function(){
       $('#exModal1').modal('show');
   }, 2000);
    setTimeout(function() {
    $('#exModal1').modal('hide');
}, 20000);
    localStorage.setItem("done", true);
  }
});             
   
</script>

Open in new window

and html for pop up modal is
  <!-- Modal page onload start-->
<div class="modal fade" id="exModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body" id="anim1">
        Your text ...bla bla... and so on!
      </div>
      <div class="modal-footer">
            <span id="timer"></span><!-- timer-->
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      
      </div>
    </div>
  </div>
</div>
   <!-- Modal page onload end-->   

Open in new window

0
Manuel-Remus Stanca
Asked:
Manuel-Remus Stanca
1 Solution
 
Snarf0001Commented:
No matter what type you pass in, most browsers will convert any object passed in to a string when saving / retrieving from local or session storage.

So your call for:  "visited !== true" is failing, because the value is actually the string "true", not the boolean true.

Try this instead:
<script>
jQuery(document).ready(function () {
    // Get saved data from sessionStorage
    var visited = sessionStorage.getItem('visited');

    setTimeout(function () {
        if (visited !== "true") {
            $('#exModal1').modal('show');
            sessionStorage.setItem('visited', "true"); // Save data to sessionStorage
        } 
    }, 2000);

});
  setTimeout(function() {
    $('#exModal1').modal('hide');
}, 20000);
</script>

Open in new window


Or optionally if you're not actually saving any meaningful data other than the value true you could just check for visited != null
0
 
Manuel-Remus StancaAuthor Commented:
It works!
thx a lot!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now