如何修复未定义的cookie值在谷歌浏览器

我使用jQuery cookie插件，设置和存储一个模式的cookie，所以它只会显示一次，当用户访问一个网站。我对这个模式进行了测试，它在最新版本的Firefox、IE和Microsoft Edge上都能正常工作，然而，Google Chrome不起作用，每次刷新页面都会反复出现这个模式。我创建了一个警报来读取上述cookie的值:

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

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

话虽如此，使用浏览器控制台，我试图弄清楚为什么最后两个浏览器给我一个undefined的值，而其他的工作正常?有解决这个问题的办法吗?

下面是我的代码:

<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>

模态与我在jsfiddle代码片段中使用的模态基本相同。

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>

更新测试代码:

<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>

解决方案:必须将代码上传到本地或在线服务器，才能使jquery cookie完全按预期工作。它现在可以在所有现代浏览器版本中运行。在页面刷新或关闭/重新打开浏览器时，模态将只显示一次(或直到设置的过期日期，在本例中为365天)。