每次刷新时在 Javascript 中增加 Cookie 值

Question

我遇到了一个问题，我希望每次加载页面时 cookie 的值都增加 1。目前，我可以让 value 增加 1，但由于 values 变量在开始时被调用，它会继续重置每次访问。

var cName = "Cookie Value";
var cValue = 0, expDays = 10;
let cookies = document.cookie;
        
function buildCookie(cName, cValue, expDays) {
    let date = new Date();
    date.setTime(date.getTime() + (expDays * 24 * 60 * 60 * 1000));
    const expires = "expires=" + date.toUTCString();
    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
}

function setToZero() {
    buildCookie(cName, cValue=0, expDays);
    console.log('Cookie set to 0');
}

function wholePackage() {
    if (cookies == null) {
        setToZero();
    } else {
        if (cValue >= 0) {
            cValue = cValue + 1;
            buildCookie(cName, cValue, expDays);
            console.log('Cookie to set to ' + cValue);
        }
    }
}

wholePackage()

任何帮助将不胜感激，谢谢。

Answer 1

这里的问题是您在每次页面加载时都重置了计数器，因为您没有读取 document.cookie 内部的当前存储值。

您应该先读取当前值，然后加 1。

为了读取document.cookie 中属性的当前值，您可以执行以下操作：

const prop = document.cookie.split("; ").map(prop => prop.split("=")).find(prop => prop[0] === cName)
if (prop) {
    console.log('Current counter:', prop[1])
}

代码很幼稚，但它应该给你一个起点。

如果不清楚，请告诉我。

Answer 2

在wholePackage 方法中，您需要获取cookie 的值并通过以下代码将其转换为数字：

+document.cookie.split("; ")[0].split("=")[1]

这是完整的代码：

var cName = "Cookie Value";
var cValue = 0, expDays = 10;
let cookies = document.cookie;

function buildCookie(cName, cValue, expDays) {
    let date = new Date();
    date.setTime(date.getTime() + (expDays * 24 * 60 * 60 * 1000));
    const expires = "expires=" + date.toUTCString();
    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
}

function setToZero() {
    buildCookie(cName, cValue = 0, expDays);
    console.log('Cookie set to 0');
}

function wholePackage() {
    if (!cookies) {
        setToZero();
    } else {
        if (cValue >= 0) {
            cValue = +document.cookie.split("; ")[0].split("=")[1] + 1;
            buildCookie(cName, cValue, expDays);
            console.log('Cookie to set to ' + cValue);
        }
    }
}

wholePackage()

Answer 3

1. 如果你想为每次页面加载设置cookie值，那么初始值应该是1，而不是0。所以，不是setToZero，应该是setToOne。所以设置初始cValue = 1。

2. 在 wholePackage 函数中，您正在检查 cValue 是否大于或等于 0。如果是真的，您将 cookie 设置为 0。这在两个方面是错误的。 一种。 cValue 在开始时始终为 0。所以不能再高了。 湾。即使您设法以某种方式增加 cValue（例如，使用数据库），它仍然大于 0 并使 cookie 再次为 0。

因此，您需要检查 cookie 是否存在。如果存在名为 cName 的 cookie，它将被设置为 old cookie + 1。否则设置为零。

1. 您无法使用此代码检查 cookie 值

cookies = document.cookie

相反，写这个函数来检查cookie是否存在，

function getCookie(name) {
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1) {
        begin = dc.indexOf(prefix);
        if (begin != 0) return null;
    }
    else
    {
        begin += 2;
        var end = document.cookie.indexOf(";", begin);
        if (end == -1) {
        end = dc.length;
        }
    }
    return decodeURI(dc.substring(begin + prefix.length, end));
} 

那么wholePackage函数会是这样的，

let cookies = getCookie(cName);

function wholePackage() {
    
    if (cookies == null) {
        setToOne();
    } else {
            cValue = cookies + 1;
            buildCookie(cName, cValue, expDays);
            console.log('Cookie to set to ' + cValue);
        }
    }
}

4. 在 buildCookie 函数中，参数名称不能与之前声明的变量名称相同。那很糟。 cName, cValue 已经在开头声明了。

5. 您不需要将到期日期作为参数，因为您在函数内创建它们。

这是完整的固定代码，

var cName = "Cookie Value";
var cValue = 1;

function getCookie(name) {
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1) {
        begin = dc.indexOf(prefix);
        if (begin != 0) return null;
    }
    else
    {
        begin += 2;
        var end = document.cookie.indexOf(";", begin);
        if (end == -1) {
        end = dc.length;
        }
    }
    return decodeURI(dc.substring(begin + prefix.length, end));
} 

let cookies = getCookie(cName);
        
function buildCookie(cname, cvalue) {
    let date = new Date();
    date.setTime(date.getTime() + (expDays * 24 * 60 * 60 * 1000));
    const expires = "expires=" + date.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/";
}

function setToOne() {
    buildCookie(cName, cValue);
    console.log('Cookie set to 1');
}

function wholePackage() {
    
    if (cookies == null) {
        setToOne();
    } else {
            cValue = cookies + 1;
            buildCookie(cName, cValue);
            console.log('Cookie to set to ' + cValue);
        }
    }
}


wholePackage()