Set cookies using js-cookies to array-CodePudding

newbie here regarding Javascript. I am following this thread to set cookies to array by clicking button. Product compare session. Its working but the problem is, when i reload or open new page, when i click the button on new page or refreshed page, the cookies doesn't add new value, it replace all cookies which has been set from previous page. Here is the script.

 cookie_data_load = Cookies.get('compare_data');
    $('.view__compare').attr("href", "https://shop.local/compare/?id="   cookie_data_load);


    var fieldArray = [];
    $( ".product__actions-item--compare" ).click(function(){
        fieldArray.push($(this).data("compare"));
        var unique=fieldArray.filter(function(itm,i){
            return i==fieldArray.indexOf(itm);
        });

        var str = unique.join('-');
        Cookies.set('compare_data', str, { expires: 7, path: '/' });
        cookie_data = Cookies.get('compare_data');
        console.log(str);
        console.log(unique);
        alert(unique);
        $('.view__compare').attr("href", "https://shop.local/compare/?id="   cookie_data);
        return false;
    });

And second question is how to limit the number of cookies value (array) from above code? Many thanks

I have read the js-cookies github but cant understand single thing.

CodePudding user response：

Ivan, whenever you reload a page, the array of data "fieldArray" is ALWAYS empty (despite there is data in "compare_data" cookie from previous browser session)

What you have to do is to initialize "fieldArray" with it's initial value taken from cookie:

var fieldArray = (Cookies.get('compare_data') || '').split('-')

"And second question is how to limit the number of cookies value (array) from above code? Many thanks". Could you please re-phrase this question ? Did you mean limit amount of values stored in array in cookie ? (like not more then 10 values)