登录页原型中JavaScript Cookie无法正常工作的排查求助

核心错误定位 #

你的setCookie函数存在两处关键错误，导致Cookie无法正确设置：

1. 错误地将exdays数值直接拼接在Cookie值后面，导致用户名被额外追加了数字（比如用户输入test，Cookie值会变成test7）
2. 没有把生成的expires属性添加到Cookie设置语句中，控制台打印的内容和实际执行的代码不一致

修复后的代码 #

修正后的setCookie函数

function setCookie(cname, cvalue, exdays) {
    const d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    let expires = "expires="+d.toUTCString();
    // 修复：添加expires属性，移除错误的exdays拼接
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    console.log('<cookie> added "' + cname + '=' + cvalue + ';' + expires + ';path=/"')
}

完整修正后的login.js

// cookie manager
function setCookie(cname, cvalue, exdays) {
    const d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    let expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    console.log('<cookie> added "' + cname + '=' + cvalue + ';' + expires + ';path=/"')
}
function getCookie(cname) {
    let name = cname + '=';
    let ca = document.cookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return '';
}
// login code
// login details
function loginCheck() {
    if (getCookie('username') == '') {
        alert('You are not logged in.');
        console.log('<login> not logged in.');
    } else {
        console.log('<login> username = ' + getCookie('username'));
    }
}
// login detail storage
function login() {
    var username = document.getElementById('username').value;
    console.log('<login> login request recieved.');
    console.log('<login> username is : ' + username)
    setCookie('username', username, 7);
    console.log('<login> cookieconfirm: username = ' + getCookie('username'));
}

额外注意事项 #

如果你的页面是通过file://协议打开的（直接双击HTML文件），部分浏览器会限制Cookie的使用，建议搭建本地HTTP服务器（比如用Python的python -m http.server）来测试页面，确保Cookie能正常生效。

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