Question

我有一个html和Javascript代码，用于设置cookie并从cookie中获取。我复制了JS的代码，并编写了HTML的代码，但无法获取cookie。这是我的代码

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) { // sets the cookie
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.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);
  } else {
     <!--user = prompt("Please enter your name:","");-->
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
<style>  // CSS details for login page creation .

html, body {
    width: 100%;
    height: 100%;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    color: #444;
    -webkit-font-smoothing: antialiased;

    background-image: url("bg.jpg");
}
#container {
    position: fixed;
    width: 500px;
    height: 395px;
    top: 25%;
    left: 30%;
    margin-top: -5px;
    margin-left: -200x;
    background: #fff;
    border-radius: 30px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

}
form {
    margin: 0 auto;
    margin-top: 20px;
}
label {
    color: #555;
    display: inline-block;
    margin-left: 18px;
    padding-top: 10px;
    font-size: 14px;
}
p a {
    font-size: 11px;
    color: #aaa;
    float: right;
    margin-top: -13px;
    margin-right: 20px;
 -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}
p a:hover {
    color: #555;
}
input {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    outline: none;
}
input[type=text],
input[type=password] {
    color: #777;
    padding-left: 10px;
    margin: 10px;
    margin-top: 12px;
    margin-left: 18px;
    width: 290px;
    height: 35px;
    border: 1px solid #c7d0d2;
    border-radius: 2px;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
-webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
    }
input[type=text]:hover,
input[type=password]:hover {
    border: 1px solid #b6bfc0;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}
input[type=text]:focus,
input[type=password]:focus {
    border: 1px solid #a8c9e4;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
#lower {
    background: #ecf2f5;
    width: 100%;
    height: 69px;
    margin-top: 20px;
      box-shadow: inset 0 1px 1px #fff;
    border-top: 1px solid #ccc;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
input[type=checkbox] {
    margin-left: 20px;
    margin-top: 30px;
}
.check {
    margin-left: 3px;
    font-size: 11px;
    color: #444;
    text-shadow: 0 1px 0 #fff;
}

input[type=submit] {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    width: 80px;
    height: 30px;
font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #acd6ef; /*IE fallback*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
    background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
    background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
    border-radius: 30px;
    border: 1px solid #66add6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
    cursor: pointer;
}

input[type=submit]:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
    background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
    background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}

#imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.infosys {
  width: 50%;

}



</style>

</head>


<body>


    <form method = "post">
    <div id="container"> 
        <div id="imgcontainer">
            <img src="pic.png" alt="pic Logo" class="pic"  >
        </div>

        <br/>

            <label for="username">Username:</label>
            <input type="text" id="username" name="username" >
            <label for="password">Password:</label>
            <input type="password" id="password" name="password">
            <div id="lower">
                <input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label>
                <input type="submit" value="Login" onClick="checkCookie()">
            </div>
        </form>
    </div>
</body>
</html>

我如何知道用户名是否存储成功？请让我知道，我在做什么错误以及我要去哪里错误。

Answer 1

我将尝试解决很多问题：

是HTML注释-用不是注释掉JS代码的方式，并导致致命的语法错误。因此，如果您想注释掉该行，则应该为// user = prompt("Please enter your name:","");。
- 由于您注释掉了这一行，因此变量user的值永远不会被设置，并且其后的if语句也永远都不会变为true并执行，因为变量确实等于“”。取消注释此行，或查看底部有关获取用户名值的注释。
您应在使用“ onclick”时使用“ onClick”-它应为<input type="submit" value="Login" onclick="checkCookie()">

如果您试图从表单中获取用户名值并将其保存到cookie中，则需要在其中添加代码。喜欢：

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);
     }
  }
}

此外，如果您试图在提交表单之前与它进行交互，那么最好将函数附加到表单的onsubmit事件上。

Answer 2

您的代码中有2个问题。 @ camen6ert提到了问题之一，第二个问题是您正在将user变量传递给setCookie()函数，该变量为空，但是cookie名称不应为空。

您需要替换代码的这一部分：

if (user != "" && user != null) {
    setCookie("username", user, 30);
}

与此：

if (user != "" || user != null) {
    setCookie("username", document.getElementById("username").value, 30);
}

希望，它对您有用。

代码未在浏览器中为Cookie生成文件

2 个答案: