验证 Cookie 是否存在并存储信息答案

【问题标题】：Verify if Cookie exists and storing the information验证 Cookie 是否存在并存储信息
【发布时间】：2014-03-20 14:10:40
【问题描述】：

我是 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();

【问题讨论】：

你也可以使用localStorage。
客户端 Javascript 中的 Cookie 只是客户端。
@Banana 和 -SumanBogati Javascript 被标记。
@Banana 当问题是关于 Javascript 时，我认为这就是我们正在讨论的内容。
@JosephMontecalvo Javascript 被标记 - 应该很清楚。

标签： javascript ajax cookies storage verify

【解决方案1】：

要读取 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>.

干杯！

【讨论】：

【解决方案2】：

使用它们来处理 cookie。只需使用您想要的名称获取Cookie，看看您是否得到一个空值。

客户端：

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('first_name');
    if(firstNameFromCookie == ''){
       // cookie wasnt set

    }
    else{
       // cookie was set
       var yourSpan = document.getElementById('yourSpansID');
       yourSpan.innerHTML = firstNameFromCookie;
    }
}

要使用上述功能保存 cookie，您只需执行以下操作：

function whatever_Function_You_Use_To_Submit_Users_Details(){
     var firstName = ... whatever you do to retrieve first name after user inserted in
     var cookieExpieryTimeInMilliseconds = 1000 * 60 * 60; //1000 milliseconds * 60 seconds * 60 minutes - results in 1 hour time.
     setCookie('first_name',firstName ,cookieExpieryTimeInMilliseconds );
}

【讨论】：

在过去的几天里，我对 cookie 进行了大量研究，而我的问题一直是在查看示例时，您在哪里调用 id="firstName"。如何在我的 span 元素中显示用户在输入 ID“firstName”中输入的任何内容。
您应该在 document.onload 中调用它，当页面加载时您检查是否存在 cookie，如果存在，您只需将收到的值粘贴到您的 span 中，如果不存在则不存在。我会在一秒钟内更新我的答案；
好的，我会尝试在我的代码中实现它，看看会发生什么。我唯一的问题是真正掌握这个概念。我会尽快回复你
当然。如果您需要有关代码的进一步帮助，请告诉我。