javascript - 在 javascript 中设置和检索 cookie

Question

所以我正在学习 Javascript 并尝试设置和检索 cookie，我的代码看起来一切正常，但这里显然有一个问题。

function init()
{
    var panel = document.getElementById("panel");

    var user = escape("Dan, 000456");
    var expiry = new Date();
    expiry.setTime(expiry.getTime() + (7*24*60*1000) );
    document.cookie = "myData=" + user + ";" + "expires=" + expiry.toGMTString() + ";";

    if (document.cookie)
    {
        var cookieString = unescape(document.cookie);
        var list = cookieString.split("=");
        if (list[0] === "myData")
        {
            var data = list[1].split(",");
            var userName = data[0];
            var userAcct = data[1];
        }
    }

    panel.innerHTML += "Cookie String:" + cookieString;
    panel.innerHTML += "<br>Split List:" + list;
    panel.innerHTML += "<br>User Name:" + userName;
    panel.innerHTML += "<br>User Account:" + userAcct;
}
document.addEventListener("DOMContentLoaded",init, false);

当我查看结果时，它们不是我期望看到的:

Cookie String:undefined
Split List:undefined
User Name:undefined
User Account:undefined

Answer 1

现在您的主要问题是您已更正语法错误，即以下行:

var user = escape("丹, 000456");

注意:我相信转义函数现在已被弃用？

将您的 JavaScript 更改为此并确保您的浏览器允许 Cookie:

    function init(){

    var panel = document.getElementById("panel");

    var user = ["Dan, 000456"];  //<--change #1
    var expiry = new Date();
    expiry.setTime(expiry.getTime() + (7*24*60*1000) );

    //change #2 below added the array index of user to set the cookie value for myData
    document.cookie = "myData=" + user[0] + ";" + "expires=" + expiry.toGMTString();



    if (document.cookie)
    {
        var cookieString = unescape(document.cookie);
        var list = cookieString.split("=");
        if (list[0] === "myData")
        {
            var data = list[1].split(",");
            var userName = data[0];
            var userAcct = data[1];
        }
    }

    panel.innerHTML += "Cookie String:" + cookieString;
    panel.innerHTML += "<br>Split List:" + list;
    panel.innerHTML += "<br>User Name:" + userName;
    panel.innerHTML += "<br>User Account:" + userAcct;
           }
document.addEventListener("DOMContentLoaded",init, false);

还要确保您的 html 看起来像这样:

<div id="panel">Test</div>

如果需要，您可以从上面 html 中的 div 中删除 Test。 Test 值应替换为 panel.innerHTML 分配中的值。