Jquery Cookie : one time use cookie

Question

I want to put cookie to my page.
Here's the logic :
When I load the page, I want it to load a popup or bootstrap modal. But the modal only load once when the browser is active. And only will load again when the browser tab is closed or exits the browser application. I have used session to do this, but I prefer to use cookie for personal preferences.

Is there a way to do this with javascript?
I've tried with $(window).load(), and $(window).on('beforeunload',function());

Javascript :

<script type="text/javascript">
    $(window).load(function () {
        if( $.cookie('firstLoad') == 'unloaded' || $.cookie('firstLoad') == 'null' || $.cookie('firstLoad') == null ) {
            $('#openLoading').modal('show');
            var time_exp = 1;
            $.cookie('firstLoad','loaded',{ expires: time_exp });
        }
    });

    $(window).on('beforeunload', function (){
        alert($.cookie('firstLoad'));
        $.cookie('firstLoad','unloaded');
    });
</script>

The problem is sometimes the app browser will execute location.reload() and will reset the cookie in some way and make the popup appear again.
Please provide solution, thanks.

PS : the var time_exp and expires : time_exp is a last resort if the unload doesn't work

Answer 1

The beforeunload event doesn't just fire when the tab is closed. It will fire whenever the user goes to a new page in the same tab, including a page on your site. So you are resetting your cookie every time the user navigates between pages.

There is no event you can use to tell you the user is leaving your site specifically. The closest you can do is not set an expires, so that the cookie will automatically be deleted when the browser exits.

You could put a close button in the modal, and set a cookie when it is clicked so you know the user has viewed the modal and you don't need to show it again for however long you decide.