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

有关详细信息，请查看此documentation ...

使用Javascript Cookie保留页面加载类

1 个答案: