javascript - 设置 cookie 并在第一次访问时显示 div 然后隐藏

Question

我正在尝试根据 div 是否通过 javascript 存在来设置多个 cookie，但我遇到了一个我无法弄清楚的问题。第一次访问时，如果 div 存在，我想向用户显示 div，然后设置一个 3 天后过期的 cookie(称为 redCookie)。在页面刷新 div 上设置 cookie 后不应存在。 3 天后，我希望 div 再次显示 redDiv.show()。

目前 div 显示在所有页面刷新上。 cookie 已设置，但不幸的是它每次都会显示。我的 if 语句一定有问题，但不确定是什么。

if ((redCookie = true) && (redDiv.length > 0))

这是 js fiddle 的链接:https://jsfiddle.net/9uh96bh7/

这是我的功能:

$( document ).ready(function() {
    colourCookies();
});
function colourCookies () {
    var redCookie = getCookie("red-cookie-name");
    var redDiv = $('.red');
    var yellowCookie = getCookie("yellow-cookie-name");
    var yellowDiv = $('.yellow');

    if ((redCookie = true) && (redDiv.length > 0)) {
        redDiv.show();
        setCookie("red-cookie-name", redCookie, 3);
        console.log ('red cookie is set');
    } else {
        redDiv.hide();
    }
    if ((yellowCookie = true) && (yellowDiv.length > 0)) {
        yellowDiv.show();
        setCookie("yellow-cookie-name", yellowCookie, 3);
        console.log ('yellow cookie is set');
    } else {
        yellowDiv.hide();
    }
}

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

Answer 1

首先是代码。

应该是 if ((redCookie == true) && (redDiv.length > 0)) 而不是 if ((redCookie = true) && (redDiv.length > 0)) 。

=是赋值，==表示等于。

其次，逻辑部分。

cookie isset -> hide div
cookie is not set -> show div, set cookie
(correct me if I miss understood.)

所以if语句应该是:

if (redCookie == true){
    //hide div
} else {
    //show div
    //set cookie
}

第三，你在设置cookies的时候犯了一个错误。你应该像 setCookie("yellow-cookie-name", true, 3);

这样设置你的 cookie

如果您使用 setCookie("yellow-cookie-name", yellowCookie, 3); 并且 yellowCookie 为 null，这将导致您的 if 语句失败。