设置 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 语句失败。

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"。

希望对你有所帮助。