Modal pop up for new users only - bootstrap , php , js

Question

Hoping someone can help me out, I've tried to do my research online before asking.

I'm currently working on a (welcome) bootstrap modal that I have ready to go. I'm working in a php environment and I'm a super noob to php and js. Currently I have it so it pops up only once via a cookie.

<script type="text/javascript">
    $(document).ready(function () {
        if (document.cookie.indexOf("shown=true")<0) {
            var show = function(){
                $('#myModal').modal('show');
            };

            $(window).load(function(){
                var timer = window.setTimeout(show,500);
            });
        }

        document.cookie = "shown=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
    });
</script>

My issues is that it is currently displaying for all current users and I only want it to display for new sign ups only on the index page.

ie: user signs up --> clicks register --> user is taken to index page, where bootstrap modal appears (only once).

Is there a way to do this? Am I going about this the right way? Client side vs server side? Any help would be greatly appreciated

Thanks in advance.

capt.poopypants

Answer 1

If you are going to handle it on the client side is better to use localStorage. But if you have it on the client side, it will only reset when the browser cache is cleared, and won't work if a second user registers on the same browser. If you want to handle all those cases you should fetch a flag from the server to let you know if you should show the modal or not. But if you go with the client side approach, you can change your code, removing cookies and using localStorage:

<script type="text/javascript">
    $(document).ready(function() {
      var wasModalShown = localStorage.getItem('wasModalShown');
      if (!wasModalShown) {
        localStorage.setItem('wasModalShown', true);
        var show = function() {
          $('#myModal').modal('show');
        };

        $(window).load(function() {
          var timer = window.setTimeout(show, 500);
        });
      }
    });
</script>