javascript - 使用按钮删除整个 session 的消息？

Question

我正在使用下面的代码在移动设备(智能手机或平板电脑)处于纵向模式时显示一条消息。这很好用!

但是，我需要代码，当用户点击 X 按钮时，只要在该 session 中访问网站的任何页面，该消息就不再出现。

但是如果网站关闭了；在下次访问时，当以纵向模式查看网站时，该消息应该会再次出现。

如何做到这一点？

html,
body {
  width: 100%;
  height: 200%;
}

#warning-message {
  display: none;
}

@media only screen and (orientation:portrait) {
  #warning-message {
    display: block;
  }
}

@media only screen and (orientation:landscape) {
  #warning-message {
    display: none;
  }
}

#landscape-button {
  background-color: #2A3847;
  color: #ffffff;
  border-radius: 0px;
  border: 1px solid white;
  padding: 10px 10px 10px 10px;
  float: right;
  margin-top: -25px;
  margin-right: -15px;
  font-size: 1.3em;
}

Please open in "full page" mode and scale your window to a portrait size to see the message appear.<br><br>
<div id="warning-message" style="position:fixed; margin: 0 auto 0 auto; z-index: 99999999; background-color: #2A3847; width: 90vw; min-height: 90vh; text-align:center; padding:25px 15px 35px 15px; right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;">
  <button type="button" id="landscape-button">X</button>
  <p style="font-size: 1.3em; color: #ffffff; positie:absolute; text-align:center;"><span style="margin: 0 0 0 25px; text-align:center; font-size: 2em; letter-spacing: -0.04em;">please rotate your screen</span><br><br>This website is best viewed in landscape mode. So please, rotate your mobile device, and if activated also disable
    your screen rotation lock. If you prefer to remain in portrait mode, ignore this message and close it at the "x".</p>
</div>

Answer 1

您需要使用 sessionStorage - https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

当用户点击“X”时:

sessionStorage.setItem('closed', 'true');

重新加载页面时:

var data = sessionStorage.getItem('key');
if (data == 'true') {
    // do nothing
} else {
    // display block
}