javascript - 验证Cookie是否存在并存储信息

我是Javascript / Ajax的新手，正在尝试使用Cookie存储用户名。我有一个表格，想记住这个人的名字（id = firstName）。如果他们过去已经填写过此信息，我想在他们下次访问该页面时在span元素中显示他/她的名字。

这就是我想使用伪代码执行的操作。我希望很清楚...

如果存在cookie（称为名称），则在标签元素“ span”中显示该信息

其他

用户填写表单时存储该cookie

（如果有问题，我的输入将type =“ submit”作为按钮）

@banana现在，我修改了代码以匹配我拥有的所有标签名称和ID。但是，如果我在表单中输入名称，然后在页面上提交并返回，则跨度中不会显示任何内容。

function setCookie(cname, cvalue, milliseconds) {
    var d = new Date();
    d.setTime(d.getTime() + (milliseconds));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

document.onload = checkIfCookieExists;
function checkIfCookieExists(){
var firstNameFromCookie = getCookie('firstName');
if(firstNameFromCookie == ''){
   // cookie wasnt set

}
else{
   // cookie was set
   var display = document.getElementsByTagName('span');
   display.innerHTML = firstNameFromCookie;
}
}

function init(){
 var firstName = document.getElementById('firstName');
 var cookieExpieryTimeInMilliseconds = 1000 * 60 * 60; //1000 milliseconds * 60 seconds * 60 minutes - results in 1 hour time.
 setCookie('firstName',firstName ,cookieExpieryTimeInMilliseconds );
}

window.onload = init();

最佳答案

要读取cookie，可以使用Zeus.js的内置zeus.getCookie()函数。
zeus.getCookie()的工作方式如下：

所有Cookie都被压缩为一个字符串，document.cookie
zeus.getCookie()从字符串中选择所需的键
返回一个字符串。

例如，如果设置Cookie document.cookie = "like=trains"，则可以使用zeus.getCookie("like")返回值trains（作为字符串）。

要使用Zeus.js，只需将

<script src="https://rawgithub.com/thetakeaway/zeus.js/master/zeus.js"></script>

在<head></head>中。

干杯!