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

我正试图根据div是否通过javascript存在来设置多个cookie，但我遇到了一个无法解决的问题。在第一次访问时，我想向用户显示div，如果div存在，那么设置一个cookie（称为redCookie），该cookie将在3天后过期。在页面上设置cookie后，刷新div不应出现。3天后，我希望再次显示div redDiv.show（）

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

如果（（redCookie=true）和&（redDiv.length>0））

以下是js fiddle的链接：

以下是我的职能：

$( 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 "";
}

$（文档）.ready（函数（）{
彩色饼干（）；
});
函数（）{
var redCookie=getCookie（“红色cookie名称”）；
变量redDiv=$（'.red'）；
var yellowCookie=getCookie（“黄色cookie名称”）；
var yellowDiv=$（'.yellow'）；
如果（（redCookie=true）&&（redDiv.length>0））{
redDiv.show（）；
setCookie（“红色cookie名称”，红色cookie，3）；
console.log（“设置了红色cookie”）；
}否则{
redDiv.hide（）；
}
如果（（yellowCookie=true）&&（yellowDiv.length>0））{
yellowDiv.show（）；
setCookie（“黄色cookie名称”，黄色cookie，3）；
console.log（“设置了黄色cookie”）；
}否则{
黄皮；
}
}
函数setCookie（cname、cvalue、exdays）{
var d=新日期（）；
d、 设置时间（d.getTime（）+（exdays*24*60*60*1000））；
var expires=“expires=“+d.toutString（）；
document.cookie=cname+“=”+cvalue+”；“+expires+”；path=/”；
}
函数getCookie（cname）{
变量名称=cname+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i

首先是代码。

它应该是

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时出错。 您应该将cookie设置为

setCookie（“黄色cookie名称”，true，3）

如果您使用
setCookie（“黄色cookie名称”，黄色cookie，3）
和
yellowCookie
为
null
，这将导致if语句失败。
我认为问题在于设置cookie，因为一些浏览器（如chrome）在本地运行cookie时没有设置cookie，如果您在服务器上托管cookie或通过visual studio运行cookie，它就会工作。。如果可能的话，在iis中测试一次，否则您可以像下面那样使用localStorage

$( document ).ready(function() {
colourCookies();
});
function colourCookies () { 

removeIfThreeDaysElapsed('red-ls');
removeIfThreeDaysElapsed('yellow-ls');

if (!localStorage.getItem('red-ls')) {
    $(".red").show();
    localStorage.setItem("red-ls", new Date().toGMTString());
} else {
    $(".red").hide();
}
if (!localStorage.getItem('yellow-ls')) {
    $(".yellow").show();
   localStorage.setItem("yellow-ls", new Date().toGMTString());
} else {
     $(".yellow").hide();
}
}

function removeIfThreeDaysElapsed(lsname){
  var d1 = localStorage.getItem(lsname);
  if(d1){
   if(new Date() > new Date(new Date().getTime()+(3*24*60*60*1000))){
   localStorage.removeItem(lsname);
   }
  }
}

if (redCookie) {
    redDiv.hide();
} else {   
    redDiv.show();
    setCookie("red-cookie-name", true, 3);
}

您可能需要编辑代码来处理所有场景

如果您能够在浏览器中看到cookie，请尝试下面的检查

$( document ).ready(function() {
colourCookies();
});
function colourCookies () { 

removeIfThreeDaysElapsed('red-ls');
removeIfThreeDaysElapsed('yellow-ls');

if (!localStorage.getItem('red-ls')) {
    $(".red").show();
    localStorage.setItem("red-ls", new Date().toGMTString());
} else {
    $(".red").hide();
}
if (!localStorage.getItem('yellow-ls')) {
    $(".yellow").show();
   localStorage.setItem("yellow-ls", new Date().toGMTString());
} else {
     $(".yellow").hide();
}
}

function removeIfThreeDaysElapsed(lsname){
  var d1 = localStorage.getItem(lsname);
  if(d1){
   if(new Date() > new Date(new Date().getTime()+(3*24*60*60*1000))){
   localStorage.removeItem(lsname);
   }
  }
}

if (redCookie) {
    redDiv.hide();
} else {   
    redDiv.show();
    setCookie("red-cookie-name", true, 3);
}

因为当您从cookie中获取值时，它的数据类型不是布尔值，它会转换为字符串，所以您可以像上面一样进行检查，或者使用
redCookie==“true”

希望这对您有所帮助。
您正在通过执行if（（redCookie=true）…，将if（（redCookie=true）更改为if（（redCookie=true）来为redCookie赋值，因为“=”是赋值运算符，我已经尝试过了，cookie没有设置，div对我来说根本没有显示：jsfiddle.net/9uh96bh7/2i已经按照您的建议，仍然在每个页面加载时显示div：我可以看到cookie已经设置，但是div在每个页面上都显示了refreshes@replicant129请检查以上编辑是否适合您！