如何修复 Google Chrome 中未定义的 cookie 值？

Question

我正在使用 jQuery cookie plugin 来设置和存储模态 cookie，因此它只会在用户访问网站时显示一次。我测试了模态，它在最新版本的 Firefox、IE 和 Microsoft Edge 中也能正常工作，但是，Google Chrome 不起作用，并在每次刷新页面时重复显示模态。我创建了一个警报来读取上述 cookie 的值：

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

我在控制台调试了一下，注意到上面的代码returns如下：

火狐：1
Internet Explorer：yes
微软边缘：yes
Google Chrome: undefined
歌剧：undefined

话虽这么说，但使用浏览器控制台，我想弄清楚为什么最后两个浏览器给我的值是 undefined 而其他浏览器工作正常？有解决这个问题的方法吗？

这是我的代码：

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>

模式与我在 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 才能按预期完全工作。它现在适用于所有现代浏览器版本。模态将在页面刷新或 closing/reopening 浏览器上显示一次且永远不会再次出现（或直到设置的到期日期，在本例中为 365 天）。

Answer 1

如果 cookie 值不存在，则 $.cookie() 将 return undefined。因此，您可以测试该特定值，也可以指定默认值。

如果您想分配一个默认值，而您的期望值是 "no"、"yes" 或 undefined，那么您可以这样做：

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

可以这样合并：

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

如何修复 Google Chrome 中未定义的 cookie 值？

How to fix undefined cookie value in Google Chrome?

javascript

cookies

jquery

undefined

jquery-cookie