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

Question

我正在使用jQuery cookie plugin，来设置和存储模态的cookie，因此它只会在用户访问网站时显示一次。我测试了模态，它在最新版本的 Firefox、IE 和 Microsoft Edge 中都能正常工作，但是，谷歌浏览器无法正常工作，并且在每次页面刷新时都会反复调出模态。我创建了一个警报来读取所述 cookie 的值：

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

我在控制台调试了一下，发现上面的代码返回如下：

火狐：1
Internet Explorer：yes
Microsoft Edge：yes
谷歌浏览器：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 sn-p 中使用的基本相同。

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 天）。

Answer 1

如果 cookie 值不存在，则 $.cookie() 将返回 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>