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

Question

我正在使用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");  
        }
    });
});

Answer 1

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

document.cookie="div_viewed=true";

要读取Cookie，您可以使用以下方法：

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");  
        }
    });
});

有关更多信息，请参阅此文档 ...