CODEWITHSUNDEEP
javascripthtmlsession-variables
Ranjit rajan
Ranjit rajan

Reputation: 1

How to hide a div after showing only once in a session

I've a div that will show the success message after successful login and will hide after 4 seconds. The js code used is

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

This works fine. But this div will pop up every time I navigate to home page and I don't want that to happen. This div should be in hidden state until logged out and logged in again. It would be better to have a solution that wont use jquery as this is a project. I've tried sessionStorage also but that hides the div immediately after showing and not lasting 4seconds.

Thanks in advance

Upvotes: 0

Views: 1503

Answers (4)

Bekim Bacaj
Bekim Bacaj

Reputation: 5955

to make sure it world on any browser old and new - those who do and those who do not eat cookies, those who keep session storage and those who don't want them.

You need to start your page with the display: "none" of your 'success' element, and only show it, if it's the first session page load.

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

Upvotes: 0

Anjan Talatam
Anjan Talatam

Reputation: 3996

Make display to none by default and toggle to block when required

You can achieve your required behavior by reversing your implementation.

  1. Set display to none by default

  2. Convert to block after clicking login and authentication

  3. Set a timer for 4 seconds ( to display the login message )

  4. Set display back to none.

     document.getElementById("app").style.display = "block";

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

Click here for complete code snippet

Upvotes: 0

Mr.UV
Mr.UV

Reputation: 100

You can do something like this:

To check if user has successfully logged in. you can set a key/value pair in session storage after successful login. we will delete this key/value pair when we logged out from the website.

So when user redirects to home page the first thing we will do it check if "loggedIn" key is there in session storage or not.

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);
}

So now on first time user redirects to home page then the success message will be displayed and the "loggedIn" key will be set to session storage. if user redirects back to home page there will be key so we will not display message. now all you need to do is to delete this "loggedIn" key from the session storage whenever you logged out. You can delete the key by

sessionStorage.removeItem('loggedIn');

now the key is deleted after log out. it will display success message on successful loin for the first time.

Upvotes: 0

Md Rashedul Islam
Md Rashedul Islam

Reputation: 183

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

you can use js localStorage. localStorage is similar to sessionStorage, except that while localStorage data has no expiration time

Upvotes: 1

Related Questions