如何使用jQuery仅运行一次功能？

Question

I have a webpage where only registered users can be.
I use Bootstrap as CSS Framework.
If the user logged in there will be a alert box with a successmessage like this:

<div class="container">
    <div class="alert alert-success" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>Success!</strong> You have been signed in successfully!
    </div>
</div>

Now i want to close this after a few seconds. I use this jquery script to do that:

window.setTimeout(function() {
     $(".alert").fadeTo(500, 0).slideUp(500, function(){
     $(this).remove();
  });
}, 1500);

How can I run this code only once, so that if the user accidently refreshed the browser does not see this alert again ?

I've read this post here https://stackoverflow.com/a/23859937/5930557 and know that it can be done with the .one() function from http://api.jquery.com/one/
But i dont know how to include it into my code. Is someone there who can correct it for me and explain, cause jquery and javascript are new to me :P

Answer 1

You can use cookies . it is explained here

when page load you can check cookie and if it's empty alert if it s not empty you can do what you wanna do.

Answer 2

A solution would be to use a cookie and set its date to very far in the future.

Note: This fiddle won't allow you to set cookies.

 $(function(){ var popup = getCookie(popup); if(popup){ //Dislay your alert $('.container').append( ' <div class="alert alert-success" role="alert"> ' + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + '<strong>Success!</strong> You have been signed in successfully! </div>' ); } }); window.setTimeout(function() { $(".alert").fadeTo(500, 0).slideUp(500, function(){ $(this).remove(); //Set the alert cookie to false document.cookie = "popup=false; expires=Thu, 18 Dec 2090 12:00:00 UTC"; }); }, 1500); //Function to get cookies function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i = 0; i <ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length,c.length); } } return ""; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> </div> 

Answer 3

.one() will trigger an event once, everytime the page is loaded so wouldn't work for your example.

As another answer has said, you could use cookies, something like this:

// get the cookie if its there
var popUpShown = getCookie('popUpShown');
var numberOfDaysCookieExpiresIn = 99999999999;

// check the cookie to see if the popup has been shown already
if (popUpShown != '1') {
  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
      $(this).remove();
    });
  }, 1500);

  // set the cookie so we dont show the pop up again
  setCookie('popUpShown', '1', numberOfDaysCookieExpiresIn);
};