How can I make a pop up stop appearing after a user clicks the link?

Question

I've used JavaScript to set a cookie when the user clicks on the popup notice but after closing the browser completely, the cookie expires and the notice is shown again when navigating to the page.

I want the user to have the option to essentially say "Don't show this again".

1) Is there a better way to do this like saving the data to the db?

2) Can I set the cookie so it doesn't expire when the window is closed?

Here is the code to set the cookie. If cookie isn't set to "visited" it calls another function to showLightBox().

$j(document).ready(function() { 

        $j(function() {
                    checkCookie();

                });

        function checkCookie() {
                var hasVisit = getCookie("hasVisited");

                if(hasVisit != "visited") {
                    showLightBox(); 
                }
        }

        function getCookie(c_name) {
            var c_value = document.cookie;
            var c_start = c_value.indexOf(" " + c_name + "=");

                   if (c_start == -1)
                   c_start = c_value.indexOf(c_name + "=");

           if (c_start == -1)
           c_value = null;          
           else
          {
              c_start = c_value.indexOf("=", c_start) + 1;
              var c_end = c_value.indexOf(";", c_start);
              if (c_end == -1)
              c_end = c_value.length;

                   c_value = unescape(c_value.substring(c_start,c_end));
          }
            return c_value;
        }

        function setCookie(cookieName, value) {

            document.cookie = cookieName + "=" + value;  
        }

Answer 1

Did you by any chance use a session cookie? they expire when you close the browser.

You can continue reading here :

Why cookies dont expire after closing browser?

Answer 2

You can set the date when the cookie will be expired like this.

document.cookie="username=suman; expires=Thu, 18 Dec 2020 11:00:00 GMT";

Now this cookie will be deleted on 18th dec 2020. By default the cookie will be deleted when your browser is closed.

Update:- In your case the cookie will set with the date on which it will be expired.

function setCookie(cookieName,value){
    document.cookie = cookieName+"="+value+"; expires=Thu, 18 Dec 2020 11:00:00 GMT";
}

You may put any date you want at date field.

Answer 3

You are probably not setting an expiration for the cookie, so it defaults to a session cookie that expires on browser close.

If you are already using jQuery I recommend using the wonderful jQuery Cookie plugin, which makes setting and retrieving cookies a total piece of cake. See the readme/documentation for details and enjoy only having to write a couple lines of code instead of 50.

Answer 4

Why don't you use localStorage in html5 for achieving this since it is persistent, Like when a user clicks on the link for the first time set the flag

localStorage.setItem('clicked', "yes");

Then again check if this value is set,

   if(localStorage.getItem('clicked')!=null){
     //clicked
   }
   else
   {
    //not clicked
   }

If this value is set then show "Don't show this again" else don't ...