如何隐藏在会话中只显示一次的div

Question

我有一个div，将在成功登录后显示成功消息，并将在4秒后隐藏。使用的js代码是

document.getElementById('success').style.display = 'none';
}, 4000);

这很好。但这个div会在每次导航到主页时弹出我不希望发生这种情况。这个div应该处于隐藏状态，直到注销并再次登录。最好有一个不使用jquery的解决方案，因为这是一个项目。我也试过sessionStorage，但那隐藏div后立即显示和不持续4秒。

Thanks in advance

Answer 1

const alreadyShown = localStorage.getItem('alreadyShown');
if (alreadyShown === 'true') {
document.getElementById('success').style.display = 'none';
}
setTimeout(() => {
localStorage.setItem('alreadyShown', 'true');
document.getElementById('success').style.display = 'none';
}, 4000);

你可以使用js localStorage。localStorage类似于sessionStorage，除了localStorage数据没有过期时间

Answer 2

你可以这样做:

检查用户是否成功登录。登录成功后，可以在会话存储中设置密钥/值对。当我们从网站注销时，我们将删除这个键/值对。

所以当用户重定向到主页时我们要做的第一件事就是检查是否"loggedIn"键是否在会话存储中

const isLoggedIn = sessionStorage.getItem('loggedIn');
if(!isLoggedIn) {
document.getElementById('success').style.display = 'block';
setTimeout(() => {
document.getElementById('success').style.display = 'none';
sessionStorage.setItem('loggedIn', true);
}, 4000);
}

现在，当用户第一次重定向到主页时，将显示成功消息，并显示loggedIn"密钥将被设置为会话存储。如果用户重定向回主页将有关键，所以我们不会显示消息。现在您需要做的就是删除这个"loggedIn"在您登出时从会话存储中获取的密钥。可以通过

删除键。

sessionStorage.removeItem('loggedIn');

现在密钥在注销后被删除。它将在第一次失败时显示成功消息。

Answer 3

将显示默认为none，并在需要时切换为block

你可以通过反转你的实现来实现你所需要的行为。

1. 设置显示默认为none

2. 点击登录和认证后转换为块

3. 设置4秒定时器(显示登录信息)

4. 设置显示为none

   document.getElementById("app").style.display = "block";
   setTimeout(
   () => (document.getElementById("app").style.display = "none"),
   4000
   );
   

点击这里查看完整的代码片段

Answer 4

确保它在任何浏览器上的世界-那些吃和不吃饼干的人，那些保留会话存储和那些不想要它们的人。

你需要用display: "none"你的'success'元素，并且只显示它，如果这是第一次会话页面加载。

/message/.test( name ) ? 0 :
success.style.display = "block",
name = 'message';