为什么我不能将 cookie 放入变量中，然后将结果分配给 div？ [复制]答案

【问题标题】：Why can't I get a cookie into a variable and then assign a div the result? [duplicate]为什么我不能将 cookie 放入变量中，然后将结果分配给 div？ [复制]
【发布时间】：2016-07-11 18:27:11
【问题描述】：

我正在尝试将 cookie 的值放入一个全局变量中，然后我可以使用 document.getElementById 将其放入 div 中。

这是我的代码 - 就它记住 cookie 的事实而言，它工作得非常好，但它不会特别做一行，我已经清楚地为您提供了评论。

这是我所有的代码...

<!DOCTYPE HTML>
<html>
<head>
    <script>
        var globalVar = "";

        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            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];
                while (c.charAt(0) == ' ') c = c.substring(1);
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return "";
        }

        function checkCookie() {
            var user = getCookie("username");
            if (user != "") {
                alert("Welcome again " + user);
                globalVar = getCookie("username");
                document.getElementById("demo").innerHTML = globalVar; /* THIS LINE DON'T WORK WHY NOT! THE ONE BELOW DOES IN THE CHANGE COOKIE FUNCTION DOES! */
            } else {
                user = prompt("Please enter your name:", "");
                if (user != "" && user != null) {
                    setCookie("username", user, 30);
                }
            }
        }

        function changeCookie() {
            var user = getCookie("username");
            user = prompt("Please enter your name:", "");
            if (user != "" && user != null) {
                setCookie("username", user, 30);
            }
            document.getElementById("demo").innerHTML = user; /* THIS WORKS! */
        }
        checkCookie();
    </script>
</head>
<body>
    <div id="demo"></div>
    <button onclick="changeCookie()">Change username</button>
</body>
</html>

【问题讨论】：

控制台记录cookie看是否有任何值
它在这里为我工作，相同且准确的代码。您似乎正在使用 Chrome 浏览器，默认情况下不允许设置 cookie，除非您从主机或域运行文件。在Firefox中尝试它会起作用。请注意：最初您只是设置 cookie 而不是将其放入 html 中。您所说的实际上不起作用的行只会在用户再次返回时将内容放入 html 中。即您重新加载页面。我希望这是你在逻辑上所期望的。
我实际上在 IE 中尝试过，但是是的，我知道它在 Chomre 中不起作用，这让我很生气@Luke P。
LOL 据我所知，我的问题不是重复的，因为我被困在购物中心无事可做，所以我在 stackoverflow 论坛上搜索了 2 多个小时以寻求帮助......所以@Quentin我不知道你指的是什么。我想看看这个所谓的“重复”的链接。
哈哈，没关系，我的与 jquery 无关，这就是为什么我认为它无关紧要

标签： javascript html css cookies

【解决方案1】：

尝试在页面加载完成后立即调用checkCookie()。

<body onload="checkCookie()">

另一种方法是将脚本标签移动到页面末尾，就在body的结束标签之前，如下所示：

<html>
<body>
   <div id="demo"></div>
   <button></button>

  <!-- the rest of the page's HTML here -->

   <script>
      ....
      .... your script code here
      ....
      ....
      checkCookie();
   </scirpt>
</body>
</html>

【讨论】：

它不起作用的完整原因是调用checkCookie时尚未加载HTML，抛出一个非常明确的错误：Uncaught TypeError: Cannot set property 'innerHTML' of null。

【解决方案2】：

您只是在case语句的第一部分将html分配给"demo"，您需要将其添加到第二部分，并分配user变量，而不是globalVar。还要按照其他答案中的建议将代码放在正文的末尾。

function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
        globalVar = getCookie("username");
        document.getElementById("demo").innerHTML = globalVar; 
    } else {
       user = prompt("Please enter your name:","");
       if (user != "" && user != null) {
           setCookie("username", user, 30);
           document.getElementById("demo").innerHTML = user;
       }
    }
}

【讨论】：