Question

我需要为我的学习创建一个包含cookie的网站，但我无法使其成功。我试图寻找解决方案，但找不到我需要的东西，因为我的老师想要简单的代码，他教给我的东西。我需要制作一个记住您用户名的cookie，这样当您下次登录时（不需要识别密码），您会收到消息“再次欢迎'用户'”。必须使用简单的Javascript才能完成！

这是我的javascript文件（cookies.js）：

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].trim();
  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);
  }
else 
  {
  user = document.getElementById("username").value;
  if (user!="" && user!=null)
    {
    setCookie("username",user,30);
    }
  }
}

这是我的登录页面（inloggen.html）：

<!DOCTYPE html>
<html>
    <head>
        <title>Inloggen</title>
        <meta charset="iso-8859-1">
        <meta name="keywords" content="Javascript">
        <meta name="author" content="Arjan Oskam">
        <meta name="description" content="Javascript">
        <link rel="Stylesheet" href="css/style.css">
        <script type="text/javascript">
            alert("Deze webpagina maakt gebruik van cookies");
        </script>
        <script type="text/javascript" src="javascript/cookies.js"></script>
    </head>
    <body>
        <script>
            function checkCookie()
            {
                var user = getCookie("username");
                if (user != "")
                {
                    alert("Welcome again " + user);
                }
                else
                {
                    user = document.getElementById("username").value;
                    if (user != "" && user != null)
                    {
                        setCookie("username", user, 30);
                    }
                }
            }
        </script>
        <div id="wrapper">
            <div id="head">
                <div><img src="images/logo.gif" id="logo" alt="logo"></div><!-- #Logo -->
                <div id="banner"><img src="images/banner.jpg" alt="banner"></div>


            </div><!-- #Head -->
            <div id="menu">
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="id-ontwikkelaar.html">ID-Ontwikkelaar</a></li>
                        <li><a href="quiz.html">Quiz</a></li>
                        <li><a href="formulier.html">Registreren</a></li>
                        <li><a href="inloggen.html">Inloggen</a></li>
                    </ul>
                </nav>
            </div><!-- Menu -->
            <div id="inhoud">
                <br>
                <br>
                <h2>Inloggen</h2>
                <div id="tekst">
                    <form class="uitlijnen" id="form" onsubmit="setCookie();
                getCookie();
                checkCookie();">
                        <br>
                        Gebruikersnaam: <input type="text" name="username" id="username" placeholder="Typ hier uw username" required><br><br>
                        Wachtwoord: <input type="password" name="wachtwoord" placeholder="Typ hier uw wachtwoord" required><br><br>
                        <input type="submit" value="inloggen" class="button">
                    </form>
                </div><!-- #Tekst -->
            </div><!-- #Inhoud -->
        </div><!-- #Wrapper -->
    </body>
</html>

我希望你能帮助我！

Answer 1

我认为您错误地设置了Cookie。我建议您在设置cookie后在函数setCookie中尝试console.log（document.cookie），然后在Chrome控制台中检查显示的内容。

另外，你可以尝试编写document.cookie并直接在chrome console中输入，看看你得到了什么。

基本上，我认为错误是：

document.cookie = cname+"="+cvalue+"; "+expires;

应该是

document.cookie = cname+'="'+cvalue+';'+expires+'"';

因为cookie需要

userName="test; expires...";

Answer 2

在这里，代码略有更新，您没有将参数传递给setCookie函数

<!DOCTYPE html>
<html>
<head>
<title>Inloggen</title>
<meta charset="iso-8859-1">
<meta name="keywords" content="Javascript">
<meta name="author" content="Arjan Oskam">
<meta name="description" content="Javascript">
<link rel="Stylesheet" href="css/style.css">
<script language="javascript">
function setCookie()
{
    checkCookie();
    var cname = "username";
    var cvalue = document.getElementById("username").value;
    var exdays = 7;
    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].trim();
      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);
    }
}
</script>
</head>
<body>
<div id="wrapper">
  <div id="head">
    <div><img src="images/logo.gif" id="logo" alt="logo"></div>
    <!-- #Logo -->
    <div id="banner"><img src="images/banner.jpg" alt="banner"></div>
  </div>
  <!-- #Head -->
  <div id="menu">
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="id-ontwikkelaar.html">ID-Ontwikkelaar</a></li>
        <li><a href="quiz.html">Quiz</a></li>
        <li><a href="formulier.html">Registreren</a></li>
        <li><a href="inloggen.html">Inloggen</a></li>
      </ul>
    </nav>
  </div>
  <!-- Menu -->
  <div id="inhoud"> <br>
    <br>
    <h2>Inloggen</h2>
    <div id="tekst">
      <form class="uitlijnen" id="form" onsubmit="setCookie();" method="post">
        <br>
        Gebruikersnaam:
        <input type="text" name="username" id="username" placeholder="Typ hier uw username" required>
        <br>
        <br>
        Wachtwoord:
        <input type="password" name="wachtwoord" placeholder="Typ hier uw wachtwoord" required>
        <br>
        <br>
        <input type="submit" value="inloggen" class="button">
      </form>
    </div>
    <!-- #Tekst -->
  </div>
  <!-- #Inhoud -->
</div>
<!-- #Wrapper -->
</body>
</html>

Javascript cookie记住输入值

2 个答案: