当网站上的用户不起作用时，每次只显示一次 div？

Question

我想问一下javascript，如何一次显示一个div？

我有我在下面工作的代码。但还是不行。

JS 每次显示一次 Div

(function() {
    var visited = sessionStorage.getItem('visited');
    if (!visited) {
        document.getElementById("popupMode").style.visibility = "visible";
        sessionStorage.setItem('visited', true);
    }
})();

我想要什么：

我有一个弹出 div 让用户可以选择模式。当用户选择了弹出窗口将消失。当我刷新页面时，我希望弹出窗口不再出现，它只在我们开始访问网络时出现一次。

如果您不介意，我在弹出窗口中也有一个切换器模式，但它不会切换。

完整代码见My Codepen

弹出模式

<!-- Popup Mode -->
<div id="popupMode">
  <div class="container-fluid p-0 h-100">
    <div class="row h-100">
      <div class="col-12 main-content">
        <div id="modeChoice">
          <div class="title">
            <h2>Welcome</h2>
            <p>
              You can switch the button from light mode<br>to dark mode
            </p>
          </div>
          <div class="choose-mode">
            <div id="modeSwitcher">
              <input type="checkbox" class="checkbox" id="chk" />
              <label class="label" for="chk">
                 <i class="fas fa-moon"></i>
                 <div class="ball"></div>
              </label>
            </div>
          </div>
          <div id="buttonPopupMode">
            <a href="#" class="btn button-primary">UNDERSTAND</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

完整的 JS

window.onload = function() {

  (function() {
    var visited = localStorage.getItem('visited');
    if (!visited) {
      document.getElementById("popupMode").style.visibility = "visible";
      localStorage.setItem('visited', true);
    }
  })();

  if (localStorage.darkMode == "true") {
    document.body.classList.toggle('dark');
    document.getElementById("chk").checked = true;
  } else {
    document.body.classList.toggle('light');
  }
};

document.getElementById("chk").addEventListener('change', () => {
  document.body.classList.toggle('dark');
  document.body.classList.toggle('light');
  localStorage.darkMode = (localStorage.darkMode == "true") ? "false" : "true";
});

$("#popupMode").delay(3000).fadeIn(500);

$("#buttonPopupMode .button-primary").on('click', function() {
  $('#popupMode').hide();
})

Answer 1

将这一行 $("#popupMode").delay(3000).fadeIn(500); 移到 if (!visited) {...} 内。

更新后的代码如下所示。

window.onload = function() {

  (function() {
    var visited = localStorage.getItem('visited');
    if (!visited) {
      document.getElementById("popupMode").style.visibility = "visible";
      localStorage.setItem('visited', true);
      // Add below line. 
      $("#popupMode").delay(3000).fadeIn(500);
    }
  })();

  if (localStorage.darkMode == "true") {
    document.body.classList.toggle('dark');
    document.getElementById("chk").checked = true;
  } else {
    document.body.classList.toggle('light');
  }
};

document.getElementById("chk").addEventListener('change', () => {
  document.body.classList.toggle('dark');
  document.body.classList.toggle('light');
  localStorage.darkMode = (localStorage.darkMode == "true") ? "false" : "true";
});

// remove below line.
// $("#popupMode").delay(3000).fadeIn(500);

$("#buttonPopupMode .button-primary").on('click', function() {
  $('#popupMode').hide();
})

---

附言 localStorage 与 sessionStorage localStorage 和 sessionStorage 完成完全相同的事情并具有相同的 API，但使用 sessionStorage - the data is persisted only until the window or tab is closed，而使用 localStorage - the data is persisted until the user manually clears the browser cache or until your web app clears the data。我建议使用localStorage，但这取决于您和您的要求，您可以选择更合适的。