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

Question

I am using JavaScript to allow users to show and hide recently viewed products.

On page load, a div containing recently viewed products is set to be closed. It opens if users click on the heading. However, if users open the div and then navigate to another product page, the same div is closed again (obviously).

I understand that I need to use a JavaScript cookie to make the div stay open after a page load. I have looked at various tutorials, but I can't understand how they related to my unique situation. Does anyone have any suggestions?

This is the JavaScript I am currently using:

$(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

To create a cookie you can use this:

document.cookie="div_viewed=true";

To read a cookie you can use this:

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

So in your case, it would be something like this:

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

For more info, check this documentation ...