How to fix undefined cookie value in Google Chrome?

Question

I am using a jQuery cookie plugin, to set and store a cookie of a modal, so it will only show once when the user visits a website. I tested the modal and it worked as so in the latest versions of Firefox, IE, and Microsoft Edge, however, Google Chrome doesn't work and repeatedly brings up the modal upon every page refresh. I created an alert to read the value of the said cookie with:

alert($.cookie("modal_shown")); // read available cookie

I debugged it in the console and noticed the above code returns as follows:

Firefox: 1
Internet Explorer: yes
Microsoft Edge: yes
Google Chrome: undefined
Opera: undefined

With that being said, using the browser console, I'm trying to figure out why the last two browsers gives me a value of undefined whereas the others are working properly? Any solutions to resolving this?

Here's my code:

HTML:

<a href="#openModal">Open Modal</a>
<div id="openModal" class="modalDialog">
    <div>   
        <h2>Notice!</h2>
        <div class="control_toggle_icon"></div>
        <p style="text-align:left; margin: 0 0 12px;">Toggle this menu icon to show/hide the menu bar and view the images in full screen.</p>
        <a href="#close" title="Close" class="modal_btn shortcode_button btn_small btn_type1">Okay, Got it!</a>
    </div>
</div>

The modal is basically the same as I'm using from a jsfiddle snippet.

JS:

<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    "use strict";
    // only show modal once and hide it until expired
    if ($.cookie('modal_shown') == null) 
    {
        $.cookie('modal_shown', 'yes', { expires: 365, path: '/' });
        // show modal
        $(".modalDialog").css({opacity : "1", pointerEvents : "auto"});
    }

    // destroy modal upon click
    $(".modal_btn").click(function(){
        $(".modalDialog").css({opacity : "0", pointerEvents : "none"});
    });
    alert($.cookie("modal_shown")); // read available cookie
});
</script>

UPDATED TEST CODE:

<script type="text/javascript">
jQuery(document).ready(function(){
    "use strict";
    console.log(cookieVal); // undefined
    var cookieVal = $.cookie("modal_shown") || "no";
    console.log(cookieVal); // "no", "1" for firefox, "yes" for ie, me

    // only show modal once and hide it until expired
    if (cookieVal !== "yes")
    {
        console.log(cookieVal); // "no", "1" for firefox, "yes" for ie, me
        $.cookie('modal_shown', 'yes', { expires: 365, path: '/' }); // here it doesn't change the value to yes until next line
        cookieVal= "yes"; // force value to become yes from no
        // show modal
        $(".modalDialog").css({opacity : "1", pointerEvents : "auto"});
        console.log(cookieVal); // "yes"
    }

    // destroy modal upon click
    $(".modal_btn").click(function(){
        $(".modalDialog").css({opacity : "0", pointerEvents : "none"});
        console.log(cookieVal); // "yes"
    });
});
</script>

Resolution: Had to upload the code to a local or online server for the jquery cookie to fully work as expected. It now worked in all the modern browser versions. The modal will show up once and never again (or until the set expiration date, in this case, 365 days) on page refresh or closing/reopening the browser.

Answer 1

If the cookie value does not exist, then $.cookie() will return undefined. So, you can either test for that specific value or you can assign a default value.

If you want to assign a default value and your expected values are "no", "yes" or undefined, then you can do something like this:

var cookieVal = $.cookie("modal_shown") || "no";

Which could be incorporated like this:

<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    "use strict";
    // only show modal once and hide it until expired
    var cookieVal = $.cookie("modal_shown") || "no";
    console.log(cookieVal);      // log cookieVal
    if (cookieVal !== "yes") {
        $.cookie('modal_shown', 'yes', { expires: 365, path: '/' });
        // show modal
        $(".modalDialog").css({opacity : "1", pointerEvents : "auto"});
    }

    // destroy modal upon click
    $(".modal_btn").click(function() {
        $(".modalDialog").css({opacity : "0", pointerEvents : "none"});
    });
});
</script>