如何仅触发一次引导模式并使用浏览器本地存储来检测模式已被触发

Question

Here is my bootstrap modal code

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       ok so the content goes here good good
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

and the javascript code to trigger after 2 seconds once the page is loaded

$(window).ready(function() {
   setTimeout(function(){
       $('#exampleModalCenter').modal('show');
   }, 2000);
});

I'm looking for a code to trigger this function just once for a user and not to keep repeating each time when they visit the page again.

So, i have decided to use browser localstorage method to save this event and detect again whether it was already triggered or not.

I'm open for suggestions, if there is any better way to do this.

Thanks.

Answer 1

ohk so you want to save trigger status in localStorage...

$(document).ready(() => {
        console.log(window.localStorage.modal);
        if (window.localStorage.modal != "true") {
            setTimeout(function(){
                $("#exampleModalCenter").modal('show');
                window.localStorage.modal = true;
            }, 2000);
        }
})

This code will check first if the modal value exist or modal value is false which in first case condition will be true so modal will be visible and localstorage modal value will be true. After that for other cases it will not trigger because modal value !== true condition.

note - but if they clear the localstorage it will not be able to help you.