Создаются 2 cookie с разными значениями, как исправить?

Question

[xxxgerasim]

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

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

Но в итоге карточки всегда отображаются как список. Как я выяснил, почему-то создаются 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;
    });

Comments

[wonderingpeanut]

мне кажется два куки создаются для разных урлов, как-то сталкивался с этой проблемой. Решение тогда так и не нашел, кроме как использовать локалстораж вместо кукей

Answer 1

[Антон Шаманов]

если ты не знаешь как пользоваться cookie (чтобы значение было доступно на всех страницах сайта, нужно указывать `path=/`), то храни в localStorage/webStorage, c ними попроще работать