使用js-cookies存数组遇Cookie覆盖问题及元素数量限制咨询

我是JavaScript新手，参考相关帖子做了一个点击按钮通过js-cookies将产品数据存入Cookie数组的功能，当前代码能实现基础功能，但存在两个问题：

• 刷新页面或打开新页面后，点击按钮无法向已有Cookie中追加新值，会直接覆盖之前的内容
• 不知道如何限制Cookie数组的元素数量

原始代码 #

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

优化后的代码（来自用户uladzimir） #

var fieldArray = (Cookies.get('compare_data') || '').split('-');     
$(".product__actions-item--compare").click(function () {    
    if (fieldArray.length >= 3) {
        alert("抱歉，已达到对比数量上限 :(");    
    } else {
        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;    
    }   
});

优化说明 #

解决「覆盖Cookie」问题 #

原始代码中var fieldArray = []每次页面加载都会初始化空数组，完全没有读取已存储的Cookie数据，导致刷新/新页面后点击按钮都是从空数组开始存储，直接覆盖旧Cookie。

优化后的代码通过(Cookies.get('compare_data') || '').split('-')实现了Cookie数据的恢复：

• 先读取已有的compare_data Cookie值
• 若Cookie不存在（值为undefined），则用空字符串替代
• 将读取到的字符串用-分割为数组，这样页面加载时就能把之前的对比数据恢复到fieldArray中，后续点击按钮即可正常追加内容而不覆盖。

解决「元素数量限制」问题 #

优化代码在点击事件中加入了判断逻辑if (fieldArray.length >= 3)，当数组元素数量达到设定的上限（这里是3）时，弹出提示并阻止添加新元素。你可以根据需求修改3这个数字来调整限制数量。

同时保留了原有的去重逻辑，确保不会添加重复的产品ID。

内容的提问来源于stack exchange，提问作者Ivan Nugraha