JavaScript实现Cookie计数：页面初始化、刷新自增并控制台打印

你提到的「是否应该判断COOKIE本身是否存在，而非判断value参数」这个判断完全正确。计数器的逻辑是基于用户本地已存储的cookie值计算的，和调用函数时传入的value参数没有必然联系，必须优先读取已有cookie的值来做判断。

你之前的实现出现了两个典型问题：

1. 后自增运算符t++的特性：该表达式会先返回变量当前值，再执行自增操作，因此你传入setCookie的还是自增前的数值，导致首次输出为0，换成前自增++t或者直接传入t+1即可解决这个问题。
2. 逻辑耦合问题：如果你的setCookie既要承担通用的cookie写入功能，又要内置计数器自增逻辑，就会出现你提到的传入固定value也会被强制自增的冲突，因此最好把计数器逻辑和通用cookie读写逻辑分离。

符合需求的实现方案 #

我们保留通用cookie读写函数的原有能力，单独封装计数器逻辑，既满足你的三个需求，也不会影响原有setCookie的通用使用：

// 通用写入Cookie函数 保留原有功能
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

// 通用读取Cookie函数 保留原有功能
function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for(let i=0;i < ca.length;i++) {
        let c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

// 页面加载时自动执行计数器逻辑
window.addEventListener('load', function() {
    // 优先读取已有计数器cookie，不存在则初始化为0
    let count = parseInt(getCookie('page_view_count')) || 0;
    // 计数器自增
    count++;
    // 写入cookie，有效期可自行调整，示例为7天
    setCookie('page_view_count', count, 7);
    // 控制台打印当前值
    console.log('当前计数器值为', count);
})

该实现完全匹配你的三个需求：

• 页面首次加载时无对应cookie，会自动将计数器初始化为1
• 每次页面刷新都会读取已存储的数值完成自增
• 写入完成后实时打印当前计数器值
• 通用setCookie功能不受影响，调用setCookie('test', 1, 5)会正常写入值为1的cookie，不会被强制自增

如果需要把计数器逻辑封装成可复用的函数，可以使用下面的写法：

function updatePageCounter(expireDays = 7) {
    let count = parseInt(getCookie('page_view_count')) || 0;
    count++;
    setCookie('page_view_count', count, expireDays);
    console.log('当前计数器值为', count);
    return count;
}
// 页面加载时调用即可
window.addEventListener('load', updatePageCounter);

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