Question

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

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

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

Firefox：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代码段相同。

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>

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

1 个答案: