Создаются два cookie при переключении вида карточек

Question

Стоит задача настроить переключение вида (секта/список) карточек товара таким образом, чтобы при выбора вида на других страницах выбранный вид сохранялся. Я решил сделать это с помощью куки.

При клике на иконку вида, записывается куки. И поставил условия, что если куки = списку, то отображать с помощью списка.

Но в итоге карточки всегда отображаются как список. Как я выяснил, почему-то создаются 2 куки с разными значениями.

Как можно исправить это? Я новичок в JS и в кодинге в целом

   if (document.cookie ='productbox=grid') {
        jQuery('.product-js').removeClass('product-box-flex');  
        jQuery('.product-js').addClass('product-box');
        jQuery('.product-view-button .list').removeClass('active');  
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-12 col-lg-12').addClass('col-md-6 col-lg-4');
    }
    
    if (document.cookie ='productbox=list') {
        jQuery('.product-js').removeClass('product-box');  
        jQuery('.product-js').addClass('product-box-flex');
        jQuery('.product-view-button .grid').removeClass('active');     
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-6 col-lg-4').addClass('col-md-12 col-lg-12');
    }
    
    jQuery('.product-view-button .grid').click(function(){
        document.cookie ='productbox=grid';
        jQuery('.product-js').removeClass('product-box-flex');  
        jQuery('.product-js').addClass('product-box');
        jQuery('.product-view-button .list').removeClass('active');  
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-12 col-lg-12').addClass('col-md-6 col-lg-4');
      
        return false; 
    });
    
    jQuery('.product-view-button .list').click(function(){
        document.cookie ='productbox=list';
        jQuery('.product-js').removeClass('product-box');  
        jQuery('.product-js').addClass('product-box-flex');
        jQuery('.product-view-button .grid').removeClass('active');     
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-6 col-lg-4').addClass('col-md-12 col-lg-12');
    
        return false;
    });

Answer 1

    if (getCookie("productbox") == "grid" || getCookie("productbox") == null) { // читаем куки
        jQuery('.product-js').removeClass('product-box-flex');  
        jQuery('.product-js').addClass('product-box');
        jQuery('.product-view-button .list').removeClass('active');  
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-12 col-lg-12').addClass('col-md-6 col-lg-4');
    }
    
    if (getCookie("productbox") == "list") { // читаем куки
        jQuery('.product-js').removeClass('product-box');  
        jQuery('.product-js').addClass('product-box-flex');
        jQuery('.product-view-button .grid').removeClass('active');     
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-6 col-lg-4').addClass('col-md-12 col-lg-12');
    }
    
    jQuery('.product-view-button .grid').click(function(){
        document.cookie ='productbox=grid';
        jQuery('.product-js').removeClass('product-box-flex');  
        jQuery('.product-js').addClass('product-box');
        jQuery('.product-view-button .list').removeClass('active');  
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-12 col-lg-12').addClass('col-md-6 col-lg-4');
      
        return false; 
    });
    
    jQuery('.product-view-button .list').click(function(){
        document.cookie ='productbox=list';
        jQuery('.product-js').removeClass('product-box');  
        jQuery('.product-js').addClass('product-box-flex');
        jQuery('.product-view-button .grid').removeClass('active');     
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-6 col-lg-4').addClass('col-md-12 col-lg-12');
    
        return false;
    });
    
    function getCookie(key){
        let myReturn = null;
        let cookies = document.cookie.split("; ");
        for(var i = 0; i < cookies.length; i ++){
            let keyValue = cookies[i].split("=");
            if(keyValue[0] == key) myReturn = keyValue[1];
        }
        return myReturn;
    }

БЛОГ НА HUSL

Создаются два cookie при переключении вида карточек

Ответы (1 шт):