Question

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

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

if（（redCookie = true）＆amp;＆amp;（redDiv.length＆gt; 0））

以下是js小提琴的链接：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
}

第三，设置cookie时出错。你应该设置像setCookie("yellow-cookie-name", true, 3);

这样的cookie

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

Answer 2

我认为问题在于设置cookie，因为某些浏览器如chrome在本地运行时没有设置cookie，如果你在服务器上托管它或通过visual studio运行它，它将工作..测试一次如果可能的话，在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);
   }
  }
}

您可能需要编辑代码来处理所有方案！

如果您能够在浏览器中看到Cookie，请尝试使用以下检查...

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

因为当你从cookie获得值时，它的数据类型不是布尔值，它会被转换为字符串，所以要么像上面那样检查，要么可以使用redCookie === "true"。

希望这会对你有所帮助。

首次访问时设置cookie并显示div然后隐藏

2 个答案: