使用按钮删除整个会话的消息？答案

【问题标题】：Remove message for whole session with button?使用按钮删除整个会话的消息？
【发布时间】：2017-06-27 11:30:52
【问题描述】：

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

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

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

如何做到这一点？

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>

【问题讨论】：

你应该使用cookie。
我该怎么做呢，@Nirav Joshi。如果用户关闭了 cookie 怎么办？
你可以使用会话。
我不知道你是什么意思（？）
看看你是否想要实现比你必须在sessions这样的地方存储数据如果用户点击那个按钮而不是你必须设置session。为了显示它你必须检查session 是否存在。如果存在则不显示message。如果不是显示它。而已。如果它是 android 技术，我不知道如何在 android 中创建 sessions。希望你现在能得到它。

标签： javascript android css

【解决方案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
}

【讨论】：

谢谢@Lauren G！抱歉我的回复晚了。我会尝试在我的代码中实现你的答案。
别担心！你现在看到了什么？您是否知道您的 js 代码设置和获取 sessionStorage 变量是否正常工作，或者您是否遇到任何特定错误？
你能看看这里吗，@ Lauren G，看看你能不能帮我搞定它。 jsfiddle.net/4z9heaze/8
@Eddy - 问题 1：JS 的第 1 行使用 '.warning-message' 而不是 '#warning-message'（尽管我假设您实际上是要触发点击 '#landscape-按钮'，而不是整个 div）。问题 2：（我假设）您想在加载弹出窗口之前检查令牌的状态。这最好在 jQuery 的 `$( document ).ready(function() { }); 中处理。 .on(click) 只需要隐藏 div；其他一切都可以在 docready 函数中处理。在 docready 上，如果 'isfirst' 不存在，加载弹出窗口并保存 'isfirst'。否则，不显示弹出窗口。这有帮助吗？
谢谢@Lauren G！我相信我现在正在做你描述的事情，我希望。 jsfiddle.net/4z9heaze/16 但是，它仍然无法正常工作。即使单击按钮也不会关闭消息。很抱歉再次向您寻求更多帮助，但我自己无法到达那里。

【解决方案2】：

考虑到会话存储仅在单击“X”按钮后才开始，以下是可行的方法。因此，即使在单击关闭按钮“X”之前重新加载页面，当窗口大小调整为纵向模式或移动设备处于纵向模式时，该消息仍会出现。单击“X”按钮后，在同一会话中重新加载页面时将不再出现该消息。

See the example here!

$(document).ready(function() {
    var data = sessionStorage.getItem('isfirst');
    if (data == undefined) {
        $("#warning-message").addClass("shown-modal");
    } else {
        $("#warning-message").hide();
    }
});
//close the pop
$("#landscape-button").on('click', function() {
    sessionStorage.setItem('isfirst', 'true');
    $("#warning-message").hide();
});

【讨论】：