每次刷新 Javascript 中增加 Cookie 值

Question

我遇到了一个问题，我希望我的 cookie 的值在每次加载页面时增加 1。目前，我可以让值增加 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

如果要为每次页面加载设置 cookie 值，则初始值应为 1。而不是零。所以，它不是setToZero，它应该是setToOne。所以设置初始cValue = 1.
在 wholePackage 函数中，您正在检查 cValue 是否 大于或等于 0。如果是，则您将 cookie 设置为 0。这在两个方面是错误的。一种。 cValue 一开始总是0。所以不能再高了。 b.即使您设法以某种方式增加了 cValue（例如使用数据库），它仍然大于 0 并再次使 cookie 为 0。

因此，您需要检查cookie 是否存在。如果名称为 cName 的 cookie 存在，它将被设置为 old cookie + 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);
        }
    }
}

在 buildCookie 函数中，参数名称不能与之前声明的变量相同。那很糟。 cName, cValue 已在开头声明。
您不需要将到期日期作为参数，因为您在函数内部创建它们。

这里是完整的固定代码，


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()

每次刷新 Javascript 中增加 Cookie 值

Incrementing Cookie Value in Javascript Each Refresh

javascript

increment