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

Question

这是我的引导模式代码

    <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>

以及页面加载后 2 秒后触发的 javascript 代码

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

我正在寻找一个代码来为用户只触发一次这个功能，而不是在他们再次访问页面时每次都重复。

所以，我决定使用浏览器本地存储方法来保存这个事件并再次检测它是否已经被触发。

如果有更好的方法可以做到这一点，我愿意接受建议。

谢谢。

Answer 1

哦，所以你想在 localStorage 中保存触发状态......

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

此代码将首先检查模态值是否存在或模态值是否为假，这在第一种情况下条件为真，因此模态将可见并且本地存储模态值为真。 之后，对于其他情况，它不会触发，因为 modal value !== true 条件。

注意 - 但如果他们清除了本地存储，它将无法帮助您。