使用Javascript Cookie在页面加载时保留类

我使用JavaScript允许用户显示和隐藏最近查看的产品

在页面加载时，包含最近查看的产品的div设置为关闭。如果用户单击标题，它将打开。但是，如果用户打开该div，然后导航到另一个产品页面，则该div将再次关闭（显然）

我知道我需要使用JavaScript cookie使div在页面加载后保持打开状态。我看过各种教程，但我不明白它们与我的特殊情况有什么关系。有人有什么建议吗

这是我当前使用的JavaScript：

$(document).ready(function () {
    $("#recent-products-wrap > h3").on("click", function(e){
        if($(this).parent().has("ul")) {
            e.preventDefault();
        }
        if(!$(this).hasClass("closed")) {
        // open our new menu and add the open class
            $(this).next("ul").slideUp(350);
            $(this).addClass("closed");
            $("#recent-products-wrap > h3").removeClass("recent-products-minus");
            $("#recent-products-wrap > h3").addClass("recent-products-plus");
        }
        else if($(this).hasClass("closed")) {
            $(this).removeClass("closed");
            $(this).next("ul").slideDown(350);
            $("#recent-products-wrap > h3").removeClass("recent-products-plus");
            $("#recent-products-wrap > h3").addClass("recent-products-minus");  
        }
    });
});

---

要创建cookie，可以使用以下方法：

document.cookie="div_viewed=true";

var x = document.cookie; //return a STRING, e.g. div_viewed=true

要读取cookie，可以使用以下命令：

document.cookie="div_viewed=true";

var x = document.cookie; //return a STRING, e.g. div_viewed=true

所以在你的情况下，应该是这样的：

$(document).ready(function () {
    //check the cookie here
    if(document.cookie.length > 0){
         if(document.cookie.indexOf("div_viewed=true") >= 0)
              //div is on opened position
         else
              //div is on closed position
    }

    $("#recent-products-wrap > h3").on("click", function(e){
        if($(this).parent().has("ul")) {
            e.preventDefault();
        }
        if(!$(this).hasClass("closed")) {
        // open our new menu and add the open class
            document.cookie="div_viewed=true";
            $(this).next("ul").slideUp(350);
            $(this).addClass("closed");
            $("#recent-products-wrap > h3").removeClass("recent-products-minus");
            $("#recent-products-wrap > h3").addClass("recent-products-plus");
        }
        else if($(this).hasClass("closed")) {
            document.cookie="div_viewed=false";
            $(this).removeClass("closed");
            $(this).next("ul").slideDown(350);
            $("#recent-products-wrap > h3").removeClass("recent-products-plus");
            $("#recent-products-wrap > h3").addClass("recent-products-minus");  
        }
    });
});

---

有关更多信息，请查看此…

非常感谢您的回答。我花了好几个小时想弄明白！根据你的建议，我很容易就能创建cookies。但是，“if（document.cookie==”代码似乎对我不起作用。最后，我使用了。再次感谢。很高兴我能提供帮助。别忘了将其标记为正确答案，如果您认为有用，请增加投票数。。